Пълно ръководство за търсене в реално време в Laravel

Информатек Дигитал » Ресурси » Пълно ръководство за търсене в реално време в Laravel

Когато започнете да работите с Laravel и имате нужда от търсачка в реално време, която реагира мигновеноЛесно е да се изгубите сред хиляди възможни подходи: AJAX с fetch, jQuery, Alpine.js, Scout с Algolia или Meilisearch, филтриране през frontend и т.н. Добрата новина е, че екосистемата на Laravel вече предоставя практически всичко необходимо, за да настроите гладко и бързо търсене, без да се проваляте в опита си.

В тази статия ще видите как да сглобите различни видове търсене в реално време в LaravelОт класическо AJAX автоматично довършване до пълнотекстово търсене с Laravel Scout и търсачки като Algolia, Meilisearch, самата база данни или дори Elasticsearch. Ще видите и леки алтернативи с Alpine.js за филтриране на данни директно в браузъра, когато обемът на данните е малък.

Какво е търсене в реално време в Laravel и как работят основните неща?

Идеята зад търсенето в реално време е, че докато потребителят въвежда текст в текстово полеЗадейства се заявка и резултатите се актуализират без презареждане на страницата. Технически това включва три ключови компонента: backend-а на Laravel, JavaScript на браузъра и обмен на данни във формат JSON.

От една страна, Laravel действа като сървърен слой Той е отговорен за получаването на заявки, интерпретирането на параметрите за търсене (въведения текст), заявките към базата данни и връщането на структуриран отговор, обикновено във формат JSON. Този отговор може да показва успех, грешка или че не са намерени резултати.

в другия край, JavaScript е отговорен за слушането на потребителски събития. При търсенето, изпратете асинхронни заявки (AJAX) към backend-а и покажете върнатите данни на страницата, без браузърът да извършва пълно обновяване. Това може да се направи с native fetch, jQuery AJAX или малки реактивни библиотеки като Alpine.js.

С този основен механизъм можете да изградите от Просто автоматично довършване с няколко записа, до усъвършенствана търсачка за пълен текст с релевантност, номериране на страници и филтри, поддържана от библиотеки като Laravel Scout и външни търсачки, оптимизирани за търсене.

Модел, маршрути и контролер за основна търсачка в реално време

Преди да се задълбочите в JavaScript, трябва да се уверите, че Laravel частта е добре организирана: красноречив модел за търсене, ясни маршрути и специален контролер да управлява логиката на търсенето в реално време.

Първата стъпка е да имате модел Eloquent, който представлява таблицата, в която ще търсите. Представете си таблица с държави и модел, наречен Родителите Много просто, без времеви марки и с разрешено групово присвояване:

Пример за минимален Eloquent модел за търсения:

namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Pais extends Model
{
use HasFactory;
protected $guarded = [];
public $timestamps = false;
}

Тук е посочено, че моделът Pais се намира в стандартното пространство от имена на Laravel.Наследява от Model и ви позволява да присвоите всяко поле с create(), като оставите защитения масив празен. Чрез деактивиране на времевите отметки с public $timestamps = false, избягвате проблеми, ако таблицата няма колоните created_at и updated_at.

Следващата стъпка е да се дефинира маршрутите, които ще обработват както показването на търсачката, така и AJAX заявкитеМного често срещана схема комбинира GET маршрут за показване на изгледа и POST маршрут, предназначен за получаване на заявки в реално време:

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\BuscadorController;

Route::get('/', function () {
return view('welcome');
});

Route::get('buscador', [BuscadorController::class, 'index']);
Route::post('buscador', [BuscadorController::class, 'buscar']);

Коренният маршрут връща приветствен изглед, докато URL адресът /search е запазено за функцията за търсенеМетодът index() на контролера показва формата и полето за търсене, докато методът search() обработва асинхронни заявки, изпратени от браузъра.

В контролера можете да имплементирате много практичен модел: Подгответе масив от отговори по подразбиране в случай на грешка и го презаписва само когато наистина е валидна AJAX заявка и заявката се изпълнява без проблеми.

Контролерът може да има подобна структура това:

namespace App\Http\Controllers;

use App\Models\Pais;
use Illuminate\Http\Request;

class BuscadorController extends Controller
{
public function index()
{
return view('welcome');
}

public function buscar(Request $request)
{
$response = [
'success' => false,
'message' => 'Hubo un error',
];

if ($request->ajax()) {
$data = Pais::where('nombre', 'like', $request->texto.'%')
->take(10)
->get();

$response = [
'success' => true,
'message' => 'Consulta correcta',
'data' => $data,
];
}

return response()->json($response);
}
}

В този момент вече имате Пълният цикъл на backend-а: входяща AJAX заявка, проверка дали е AJAX, заявка с „where like“ и ограничаване на резултатите до разумен брой, използвайки take(10), за да се избегне претоварване на базата данни. Отговорът винаги се изпраща в JSON, което значително опростява работата на фронтенда.

Изглед на Blade и JavaScript извличане за реактивно търсене

След като моделът, маршрутите и контролерът са готови, е време да изградим видимата част: формуляр с поле за търсене и блок за показване на резултатите, плюс JavaScript кода, отговорен за извършването на заявки във фонов режим.

Изгледът на Blade може да бъде много опростен, разчитайки на CSRF токен който Laravel инжектира, за да валидира POST заявки и в удобен за използване поле за търсене:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<strong><meta name="csrf-token" content="{{ csrf_token() }}"></strong>
<title>Laravel</title>
</head>
<body>

<form action="" method="post">
<input type="search" name="texto" id="buscar">
</form>

<div id="resultado"></div>

<script>
window.addEventListener('load', function () {
const buscar = document.getElementById('buscar');
const resultado = document.getElementById('resultado');

buscar.addEventListener('keyup', function () {
fetch('/buscador', {
method: 'post',
body: JSON.stringify({ texto: buscar.value }),
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest',
'X-CSRF-Token': document.head.querySelector('[name~="csrf-token"][content]').content,
},
})
.then(response => response.json())
.then(data => {
let html = '';
if (data.success) {
html += '<ul>';
for (let i in data.data) {
html += '<li>' + data.data[i].nombre + '</li>';
}
html += '<ul>';
} else {
html += 'No existen resultados';
}
resultado.innerHTML = html;
});
});
});
</script>

</body>
</html>

В този пример скриптът Слушайте за събитието keyup при въвеждане на търсенеВсяко натискане на клавиш задейства заявка за извличане към пътя /search. Текущият текст на полето се изпраща във формат JSON, а ключови заглавки, като X-Requested-With, са включени, за да се покаже, че е AJAX, заедно с CSRF токена, за да се заобиколи вградената защита на Laravel.

Когато отговорът пристигне, той се трансформира в JSON и се генерира динамично. малък HTML списък с резултатитеили съобщение като „Няма намерени резултати“, когато заявката не върне данни. Всичко това без презареждане на страницата, по естествен начин за потребителя.

Този модел може да бъде допълнително усъвършенстван с малки UX детайли, като например добавяне на забавяне (debounce) между натисканията на клавиши, показване на зареждаща програма или обработка на мрежови грешки, за да се предотврати замръзването на интерфейса при повреда.

Търсене на живо с Laravel и AJAX, използвайки jQuery

Въпреки че донасянето е набрало голяма популярност в днешно време, jQuery AJAX остава много популярен в наследени проекти или в екипи, които вече са го внедрили. Идеята е абсолютно същата: да се запише какво въвежда потребителят, да се направи асинхронна заявка и да се обнови DOM.

Типичен работен процес с jQuery в Laravel за търсене на живо обикновено включва тези основни стъпки: дефиниране на специфичен маршрут, създаване на специален контролер, изграждане на Blade изгледа с въвеждането на търсене И накрая, добавете jQuery кода, който задейства AJAX при въвеждането му.

Процесът работи по следния начин: когато потребителят започне да пише, jQuery изпраща заявка към сървъра с низа за търсене. Laravel филтрира информацията в базата данни, връща JSON със съответстващите резултати, а jQuery актуализира HTML контейнер на страницата, за да отрази съвпаденията, всичко това за милисекунди.

Предимството на използването на jQuery е, че Това до голяма степен обобщава синтаксиса на AJAX И е много лесно за четене, ако вече имате библиотеката в проекта си. Добавяте обаче допълнителна зависимост, която може да не е необходима, ако можете да работите със съвременен JavaScript и native fetch.

Филтриране и търсене в реално време във фронтенда с Alpine.js

Когато данните за показване са сравнително малки (например, по-малко от 50 XNUMX артикула), не винаги си струва да се настройва бекенд със сложни търсения. В тези случаи много удобен вариант е Филтрирайте директно в браузъра с Alpine.js, без да се правят заявки към сървъра, докато потребителят пише.

Идеята е предварително да се изчисли низ за търсене за всеки елемент (например име, описание и категория с малки букви), да се съхрани в атрибут data-search-text и да се остави Alpine.js да се погрижи за останалото. показване или скриване на елементи според написания текст в поле за търсене.

Компонентът Alpine.js може да има структура, подобна на тази: филтърЕлементи

{
search: '',
hasResults: true,
selectedValue: '',
init() {
this.$watch('search', () => this.filterItems());
this.$nextTick(() => this.$refs.searchInput?.focus());
},
filterItems() {
const searchLower = this.search.toLowerCase().trim();
const cards = this.$el.querySelectorAll('.item-card');
let visibleCount = 0;

cards.forEach(card => {
const text = card.dataset.searchText || '';
const isVisible = searchLower === '' || text.includes(searchLower);
card.style.display = isVisible ? '' : 'none';
if (isVisible) visibleCount++;
});

this.hasResults = visibleCount > 0;
},
}

В изгледа всяка карта или ред с данни би носила атрибут текст за търсене на данни с вече подготвен текст с малки буквиСледователно, филтърът се свежда до функция includes() в JavaScript, която е много бърза за кратки списъци:

<input type="search" x-model="search" x-ref="searchInput" placeholder="Buscar..." />
<div>
<div class="item-card" data-search-text="formulario contacto simple">
<h3>Formulario de contacto</h3>
<p>Formulario de contacto simple</p>
</div>
</div>

Освен това, можете да покажете празен блок на състоянието само когато Няма резултати за текущия термин за търсене.покана на потребителя да промени текста или да изчисти полето с бутон, който просто нулира търсенето до празен низ.

Този подход има ясни предимства: Няма извиквания към сървъра по време на търсенето.Взаимодействието е практически мигновено, а логиката остава силно локална и лесна за отстраняване на грешки. Това е идеално за бързи селектори, модални прозорци за избор на елементи или малки каталози, вградени в Laravel страница.

Laravel Scout: Търсене на пълен текст със специализирани двигатели

Когато нещата станат сериозни и имате нужда бързо, релевантно и мащабируемо пълнотекстово търсенеЕстественият път в Laravel е Laravel Scout. Scout е интеграционен слой, който ви позволява лесно да свържете вашите Eloquent модели с търсачки като Algolia, Meilisearch, вашата собствена база данни, колекции в паметта или дори Elasticsearch чрез външни контролери.

За да започнете със Scout, обичайното нещо е създайте нов Laravel проект или използвайте повторно съществуващ такъвЗа да го стартирате, използвайте Docker (например с Laravel Sail) и след това инсталирайте библиотеката с Composer. След като това е направено, публикувайте конфигурационния файл scout.php и коригирайте променливите на средата според драйвера, който искате да използвате.

Типичен работен процес би бил да се инсталира Scout с Composer, да се публикува неговата конфигурация и активирайте опашката за индексиране със SCOUT_QUEUE=true В .env файла се уверете, че ресурсоемките операции се обработват във фонов режим, подобрявайки времето за реакция на приложенията. Освен това трябва да се уверите, че DB_HOST сочи към базата данни, която използвате, което е особено важно, ако използвате Docker контейнери.

За да може даден модел да участва в търсенията на Scout, е необходимо да За да го маркирате изрично като достъпно за търсене, като добавите характеристиката „Търсим“Например, ако имате модел „Влак“, който представлява таблица с влакове с поле за заглавие, можете да го дефинирате по следния начин:

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Laravel\Scout\Searchable;

class Train extends Model
{
use Searchable;

protected $fillable = ['title'];

public function searchableAs()
{
return 'trains_index';
}
}

Методът searchableAs позволява персонализиране на името на индекса в търсачкатаВместо да използва името по подразбиране, извлечено от модела, Scout поема контрола. Оттук нататък Scout синхронизира операциите по създаване, актуализиране и изтриване с отдалечения или локалния индекс, в зависимост от избрания драйвер.

Laravel Scout с Algolia: Светкавично бързо SaaS търсене

Algolia е SaaS услуга, фокусирана върху да предлага много бързо и релевантно търсене в големи обеми от данниИма уеб панел за управление на индекси, правила за релевантност, синоними и др. и се интегрира много добре с Laravel чрез Scout и официалния PHP клиент.

За да използвате Algolia със Scout, ще трябва да инсталирате неговия PHP клиент с Composer, да регистрирате вашите идентификационни данни във файла .env (Application ID и Admin API Key) и задайте SCOUT_DRIVER=алголия за да кажете на Scout да използва този енджин. От панела на Algolia можете да получите както идентификатора на приложението, така и административния ключ.

След като средата е конфигурирана, можете да използвате методи като Train::search('text')->paginate(6) директно във вашите контролери, за да извършвате търсения в индексираните полета, получавайки резултати в номерирания формат Eloquent, готови за предаване към Blade изглед.

НапримерМоже да имате контролер индекс който изброява всички влакове или извършва търсене, ако е получен параметър titlesearch, и метод create за вмъкване на нови влакове в индекса:

public function index(Request $request)
{
if ($request->has('titlesearch')) {
$trains = Train::search($request->titlesearch)->paginate(6);
} else {
$trains = Train::paginate(6);
}

return view('Train-search', compact('trains'));
}

public function create(Request $request)
{
$this->validate($request, ['title' => 'required']);
Train::create($request->all());
return back();
}

В съответния изглед можете да комбинирате формуляр за регистрация на нови влакове и друга GET форма с поле за търсене на заглавие, което задейства търсенето при подаване. След това просто трябва да итерирате през колекцията от влакове и да покажете техните полета в таблица, като се възползвате от генерираните от Laravel връзки за пагинация.

Скаут с Meilisearch, база данни и колекции

Ако предпочитате да избягвате външни услуги, Meilisearch е търсачка с отворен код който можете да разположите локално или във вашата инфраструктура. Scout се интегрира с Meilisearch по много подобен начин на Algolia, просто чрез промяна на драйвера и добавяне на променливите MEILISEARCH_HOST и MEILISEARCH_KEY към .env файла.

За да го използвате, инсталирате PHP клиента на Meilisearch, настройвате SCOUT_DRIVER=meilisearch и насочете MEILISEARCH_HOST към URL адреса на екземпляра (например http://127.0.0.1:7700). Ако вече сте имали предишни записи, можете да ги индексирате с командата php artisan scout:import "App\Models\Train", така че двигателят да ги има налични.

В по-малки или умерени приложения можете също да изберете База данни за шофьори на ScoutТова използва пълнотекстови индекси и LIKE команди във вашата MySQL или PostgreSQL база данни. В този случай не ви е необходима външна услуга; просто задайте SCOUT_DRIVER=database, за да може Scout да използва самата база данни като търсачка.

Друг интересен вариант е колекция от драйвери, която работи с Eloquent колекции в паметтаТози енджин филтрира резултатите, използвайки клаузи WHERE и филтриране на колекции, и е съвместим с всяка база данни, поддържана от Laravel. Можете да го активирате с `SCOUT_DRIVER=collection` или като коригирате конфигурационния файл на Scout за по-специфични настройки.

Интеграция с Elasticsearch чрез Explorer

Ако нуждите ви от търсене включват работа с огромни обеми от данни и анализ в реално времеElasticsearch е класика. В екосистемата на Laravel, модерен начин за интегрирането му със Scout е използването на контролера Explorer, който действа като мост между вашите модели и клъстера на Elasticsearch.

За да се направи това, обикновено се използва Docker, заедно с богат docker-compose файл, който, в допълнение към типичните услуги (Laravel, MySQL, Redis, Meilisearch и др.), Контейнери Elasticsearch и KibanaСлед това инсталирате пакета jeroen-g/explorer чрез Composer и публикувате конфигурационния му файл, за да посочите кои модели трябва да бъдат индексирани.

Във файла config/explorer.php можете да регистрирате моделите си под ключа indexes, например като добавите Приложение\Модели\Влак::класОсвен това, променяте драйвера на Scout на еластичен във файла .env със SCOUT_DRIVER=elastic, така че всичко да сочи към Elasticsearch.

В рамките на модела Train, интерфейсът Explored трябва да бъде имплементиран и методът да бъде презаписан. mappableAsкоето определя картата на полетата, които ще бъдат изпратени към индекса. Минимален пример би бил:

use JeroenG\Explorer\Application\Explored;
use Laravel\Scout\Searchable;

class Train extends Model implements Explored
{
use Searchable;

protected $fillable = ['title'];

public function mappableAs(): array
{
return [
'id' => $this->id,
'title' => $this->title,
];
}
}

От сега нататък, Можете да стартирате търсения в Elasticsearch, използвайки същия Scout интерфейс., възползвайки се от много ниското време за реакция и пълната мощност на заявките на този енджин, но без да напуска екосистемата на Laravel.

С всички тези подходи – от основното автоматично довършване с fetch или jQuery, до филтрирането на frontend-а с Alpine.js, до търсенето на пълен текст с Laravel Scout и различни драйвери – Laravel ви предоставя огромен набор от опции за реализиране на търсения в реално време. съобразени с размера на вашия проект, необходимата производителност и инфраструктурата, която сте готови да поддържате.