Laravel - это популярный PHP-фреймворк с открытым исходным кодом, который широко используется для создания веб-приложений. Он предоставляет множество возможностей и функций, которые делают веб-разработку проще и быстрее. Одной из таких функций является поиск Typeahead, также известный как автозаполнение.
Авто заполняемый поиск — это функция, которая помогает пользователям найти нужный контент, предлагая возможные варианты по мере ввода текста. Это полезный инструмент, который может сделать процесс поиска более интуитивным и удобным для пользователей. В этой статье мы рассмотрим, как реализовать поиск Typeahead в Laravel.
Требования:
Прежде чем мы начнем, убедитесь, что у вас установлен проект Laravel. Если у вас его нет, вы можете следовать руководству по установке Laravel. Вам также необходимо иметь базовые знания HTML, CSS, JavaScript и PHP.
Реализация поиска Typeahead в 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, поэтому если в списке результатов есть элемент, начинающийся с запроса пользователя, появится текст с предложением, а нажатие стрелки вправо в конце текста ввода поиска приведет к автозаполнению запроса с предложенной подсказкой.
Выделение: Этот параметр устанавливается в true, чтобы выделить совпадающую часть предложения.
minLength: Этот параметр задает минимальное количество символов, которое необходимо набрать, прежде чем начнут появляться предложения.
source : Опция source соответствует набору(ам) данных, которые Typeahead будет просматривать для поиска совпадений со строкой запроса пользователя. Внутри source вы можете иметь несколько списков данных (групп). Вы можете настроить 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("https://dev.to/", function () {
return view('welcome');
});
Route::get('search', [SearchController::class,'index']);
Route::get('search/suggestions', [SearchController::class,'suggestions']);
В приведенном выше коде мы создали два маршрута. Первый маршрут привязывает конечную точку / к главному представлению. Второй маршрут связывает конечную точку поиска с методом index класса SearchController. Третий маршрут связывает конечную точку поиска/предложений с методом 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.