Laravel — это популярный PHP-фреймворк с открытым исходным кодом, который широко используется для создания веб-приложений. Он предоставляет множество функций и функций, которые упрощают и ускоряют веб-разработку. Одной из таких функций является поиск с вводом текста, также известный как поиск с автозаполнением.
Автозаполнение поиска — это функция, которая помогает пользователям находить нужный контент, предлагая возможные варианты по мере ввода. Это полезный инструмент, который может сделать процесс поиска более интуитивным и удобным для пользователей. В этой статье мы рассмотрим, как реализовать поиск Typeahead в Laravel.
Предпосылки
Прежде чем мы начнем, убедитесь, что у вас настроен проект Laravel. Если нет, вы можете следовать руководству Установка Laravel. Вам также необходимо иметь базовые знания HTML, CSS, JavaScript и PHP.
Реализация поиска с вводом текста в Laravel
Чтобы реализовать поиск Typeahead в Laravel, нам нужно создать форму поиска и контроллер для обработки поисковых запросов. Мы также будем использовать библиотеку Typeahead для отображения предложений поиска.
Шаг 1. Установка библиотеки Typeahead
Чтобы установить библиотеку Typeahead, мы можем использовать менеджер пакетов, например npm. Откройте терминал и перейдите в каталог вашего проекта Laravel. Выполните следующую команду, чтобы установить плагин jQuery Typeahead:
npm install jquery-typeahead
Шаг 2. Создание формы поиска
Для создания формы поиска мы будем использовать элемент формы HTML. Откройте файл resources/views/welcome.blade.php и добавьте следующий код:
<head>
//......
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.2/jquery.typeahead.css"
integrity="sha512-zPDjm5fHC6JUi5jEnhJetvp1zLvc1Dd5TuMFQQtqRH0KpOzrng4vHiFu2Eva+Xgu7umz0lqGHkmGjUYdeSW54w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.2/jquery.typeahead.js"
integrity="sha512-8+3AF+qMeZ3HSeKKru1YD5pFbXnIxUvMH1UsK8sKbHwbj5ZixBtDP+8oMMkBeaZc8TIIOjHnxN++zCPhHWCrMQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
// .....
<form action="{{ url('search') }}" method="GET">
<div class="typeahead__container">
<div class="typeahead__field">
<div class="typeahead__query">
<input class="typeahead"
name="query"
autocomplete="off">
</div>
<div class="typeahead__button">
<button type="submit">
<span class="typeahead__search-icon"></span>
</button>
</div>
</div>
</div>
</form>
//....
@vite(['resources/js/app.js'])
</body>
В приведенном выше коде мы создали форму с полем ввода текста и кнопкой отправки. Поле ввода имеет класс typeahead, который мы будем использовать на следующем шаге для инициализации библиотеки Typeahead.
Шаг 3. Инициализация библиотеки Typeahead
Для инициализации библиотеки Typeahead мы будем использовать код JavaScript. Откройте файл public/js/app.js и добавьте следующий код:
import $ from "jquery";
import "jquery-typeahead";
$(function () {
$.typeahead({
input: ".typeahead",
hint:true,
minLength:2,// default
source: {
groupName: {
// Ajax Request
ajax: function (query) {
return {
type: "GET",
url: "/search/suggestions",
data: {
query: "{{query}}"
},
callback: {
done: function (data) {
return data;
}
}
}
}
}
}
});
});
В приведенном выше коде мы использовали функцию jQuery $(function () {}, чтобы убедиться, что библиотека Typeahead инициализируется после загрузки страницы. Мы также использовали функцию $.typeahead() для инициализации библиотеки Typeahead в поле ввода текста с помощью класса typeahead.
Мы также передали объект с некоторыми параметрами конфигурации в функцию typeahead. Варианты:
hint: для этого параметра установлено значениеtrue, поэтому текст предложения будет отображаться, если в списке результатов есть элемент, который начинается с запроса пользователя, а также нажатие стрелки вправо в конце текста ввода поиска приведет к автозаполнению запроса с предложенным намекать.highlight: для этого параметра установлено значениеtrue, чтобы выделить совпадающую часть предложения.minLength: этот параметр устанавливает минимальное количество символов, которое необходимо ввести, прежде чем начнут появляться предложения.source: Опция источника соответствует набору(ам) данных, которые Typeahead просматривает, чтобы найти совпадения для строки пользовательского запроса. Внутри источника у вас может быть несколько списков данных (групп). Вы можете настроитьsource.group:
–ajax: эта функция отправляет запрос AJAX к конечной точке/search/suggestionsс запросом, чтобы получить предложения.
Шаг 4. Создание контроллера
Для обработки поисковых запросов нам нужно создать контроллер. Выполните следующую команду, чтобы создать контроллер:
php artisan make:controller SearchController
Эта команда создаст класс SearchController в каталоге app/Http/Controllers. Откройте файл app/Http/Controllers/SearchController.php и добавьте следующий код:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Product;
class SearchController extends Controller
{
public function index(Request $request)
{
$query = $request->input('query');
$products = Product::where('name', 'like', "%$query%")->get();
return view('search', compact('products'));
}
public function suggestions(Request $request)
{
$query = $request->input('query');
$suggestions = Product::where('name', 'like', "%$query%")->pluck('name');
return response()->json($suggestions);
}
}
Ищем в модели
Product(использовалась в предыдущем блоге). Вы можете использовать любую другую модель по вашему выбору.
В приведенном выше коде мы создали два метода в классе SearchController. Метод index обрабатывает поисковые запросы и извлекает продукты с именами, соответствующими запросу. Метод suggestions возвращает предложения для поиска Typeahead.
Шаг 5. Создание маршрутов
Чтобы сопоставить форму поиска с классом SearchController, нам нужно создать маршруты. Откройте файл routes/web.php и добавьте следующий код:
Route::get('/', function () {
return view('welcome');
});
Route::get('search', [SearchController::class,'index']);
Route::get('search/suggestions', [SearchController::class,'suggestions']);
В приведенном выше коде мы создали два маршрута. Первый маршрут сопоставляет конечную точку / с представлением home. Второй маршрут сопоставляет конечную точку search с методом index класса SearchController. Третий маршрут сопоставляет конечную точку search/suggestions с методом suggestions класса SearchController.
Шаг 6. Создание представления
Чтобы отобразить результаты поиска, нам нужно создать представление. Создайте новый файл resources/views/search.blade.php и добавьте следующий код:
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
@foreach ($products as $product)
<tr>
<td>{{ $product->id }}</td>
<td>{{ $product->name }}</td>
<td>{{ $product->price }}</td>
</tr>
@endforeach
</tbody>
</table>
В приведенном выше коде мы создали таблицу для отображения результатов поиска. Переменная $products содержит результаты поиска, переданные из класса SearchController. Цикл @foreach перебирает массив $products и отображает информацию о продукте в таблице.
Шаг 7. Тестирование приложения
Наконец, мы готовы протестировать приложение. Запустите сервер разработки, выполнив следующую команду:
php artisan serve
Откройте веб-браузер и перейдите к http://localhost:8000. Вы должны увидеть форму поиска Typeahead. Начните вводить текст в форму поиска, и под полем ввода должны появиться предложения. Выберите предложение, и вы будете перенаправлены на страницу результатов поиска, на которой отображаются соответствующие продукты.
Заключение
В этом руководстве мы узнали, как реализовать функцию поиска Typeahead в Laravel. Мы использовали плагин jQuery Typeahead и создали форму поиска, контроллер, маршруты и представление для обработки поисковых запросов и отображения результатов. Следуя шагам, описанным в этом руководстве, вы сможете реализовать функцию поиска Typeahead в своих собственных приложениях Laravel.
