Kompletný sprievodca vyhľadávaním v reálnom čase v Laraveli

Informatec Digital » Zdroje » Kompletný sprievodca vyhľadávaním v reálnom čase v Laraveli

Keď začnete pracovať s Laravelom a potrebujete vyhľadávač v reálnom čase, ktorý reaguje okamžiteJe ľahké sa stratiť medzi tisíckami možných prístupov: AJAX s fetch, jQuery, Alpine.js, Scout s Algoliou alebo Meilisearch, filtrovanie na frontende atď. Dobrou správou je, že ekosystém Laravelu už poskytuje prakticky všetko, čo potrebujete na nastavenie plynulého a rýchleho vyhľadávania bez toho, aby ste pri pokuse zomreli.

V tomto článku sa dozviete, ako ho zostaviť rôzne typy vyhľadávania v reálnom čase v LaraveliOd klasického automatického dopĺňania AJAX až po fulltextové vyhľadávanie s Laravel Scout a vyhľadávacími nástrojmi ako Algolia, Meilisearch, samotnou databázou alebo dokonca Elasticsearch. Uvidíte aj odľahčené alternatívy s Alpine.js na filtrovanie údajov priamo v prehliadači, keď je objem údajov malý.

Čo je vyhľadávanie v reálnom čase v Laraveli a ako fungujú základy?

Myšlienka vyhľadávania v reálnom čase spočíva v tom, že keď používateľ píše do textového poľaSpustí sa dopyt a výsledky sa aktualizujú bez opätovného načítania stránky. Technicky to zahŕňa tri kľúčové komponenty: backend Laravelu, JavaScript prehliadača a výmenu údajov vo formáte JSON.

Na jednej strane, Laravel funguje ako serverová vrstva Je zodpovedný za prijímanie požiadaviek, interpretáciu parametrov vyhľadávania (zadaného textu), dotazovanie databázy a vrátenie štruktúrovanej odpovede, zvyčajne vo formáte JSON. Táto odpoveď môže indikovať úspech, chybu alebo to, že sa nenašli žiadne výsledky.

Na druhom konci, JavaScript je zodpovedný za počúvanie udalostí používateľov. Pri vyhľadávaní odošlite asynchrónne požiadavky (AJAX) do backendu a zobrazte vrátené údaje na stránke bez toho, aby prehliadač vykonal úplnú obnovu. Toto je možné dosiahnuť pomocou natívneho fetch, jQuery AJAX alebo malých reaktívnych knižníc, ako je Alpine.js.

S týmto základným mechanizmom môžete stavať z Jednoduché automatické dopĺňanie s niekoľkými záznamami, až po pokročilý fulltextový vyhľadávač s relevantnosťou, stránkovaním a filtrami, podporovaný knižnicami ako Laravel Scout a externými vyhľadávačmi optimalizovanými pre vyhľadávanie.

Model, trasy a ovládač pre základný vyhľadávač v reálnom čase

Predtým, ako sa ponoríte do JavaScriptu, musíte sa uistiť, že Laravel je dobre organizovaný: výrečný model na vyhľadávanie, jasné trasy a vyhradený ovládač spravovať logiku vyhľadávania v reálnom čase.

Prvým krokom je mať model Eloquent, ktorý reprezentuje tabuľku, v ktorej budete vyhľadávať. Predstavte si tabuľku krajín a model s názvom krajiny Veľmi jednoduché, bez časových pečiatok a s povoleným hromadným priradením:

Príklad minimálneho modelu Eloquent pre vyhľadávania:

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;
}

Tu sa uvádza, že model Pais sa nachádza v štandardnom mennom priestore Laravelu.Dedí z Modelu a umožňuje priradiť ľubovoľné pole pomocou create() tak, že chránené pole ponecháte prázdne. Zakázaním časových pečiatok pomocou public $timestamps = false sa vyhnete problémom, ak tabuľka neobsahuje stĺpce created_at a updated_at.

Ďalším krokom je definovať trasy, ktoré budú spracovávať zobrazenie vyhľadávača aj požiadavky AJAXVeľmi bežná schéma kombinuje trasu GET na zobrazenie pohľadu a trasu POST určenú na príjem dotazov v reálnom čase:

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']);

Koreňová trasa vráti uvítací pohľad, zatiaľ čo URL /search je vyhradené pre funkciu vyhľadávaniaMetóda index() kontroléra zobrazuje formulár a vyhľadávací vstup, zatiaľ čo metóda search() spracováva asynchrónne požiadavky odoslané z prehliadača.

V ovládači môžete implementovať veľmi praktický vzorec: Pripravte predvolené pole odpovedí v prípade chyby a prepísať ho iba vtedy, keď ide skutočne o platnú požiadavku AJAX a požiadavka sa vykoná bez problémov.

Ovládač môže mať podobná štruktúra toto:

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);
}
}

V tomto bode už máte kompletný backendový cyklus: prichádzajúca AJAX požiadavka, kontrola, či ide o AJAX, dotazovanie s parametrom „where like“ a obmedzenie výsledkov na rozumný počet pomocou take(10), aby sa predišlo preťaženiu databázy. Odpoveď sa vždy odosiela vo formáte JSON, čo výrazne zjednodušuje prácu frontendu.

Zobrazenie čepele a načítanie JavaScriptom pre reaktívne vyhľadávanie

Keď je model, trasy a ovládač pripravený, je čas vytvoriť viditeľnú časť: formulár s vyhľadávacím poľom a blokom na zobrazenie výsledkov, plus JavaScript zodpovedný za vykonávanie požiadaviek na pozadí.

Pohľad na čepeľ môže byť veľmi jednoduchý a spolieha sa na Token CSRF ktoré Laravel vkladá na overenie POST požiadaviek a do vyhľadávacieho vstupu, ktorý je vhodný na použitie:

<!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>

V tomto príklade skript Počúvajte udalosť keyup pri vyhľadávaníKaždé stlačenie klávesu spustí požiadavku na načítanie pre cestu /search. Aktuálny text poľa sa odošle vo formáte JSON a sú zahrnuté kľúčové hlavičky, ako napríklad X-Requested-With, ktoré označujú, že ide o AJAX, spolu s tokenom CSRF na obídenie natívnej ochrany Laravelu.

Keď príde odpoveď, transformuje sa do formátu JSON a dynamicky sa vygeneruje. malý HTML zoznam s výsledkamialebo správu ako „Nenašli sa žiadne výsledky“, keď dopyt nevráti žiadne údaje. To všetko bez opätovného načítania stránky, prirodzeným spôsobom pre používateľa.

Tento vzor je možné ďalej spresniť malými detailmi UX, ako napríklad pridaním oneskorenie (debounce) medzi stlačeniami klávesov, zobraziť zavádzací program alebo spracovať sieťové chyby, aby sa zabránilo zamrznutiu rozhrania v prípade zlyhania.

Živé vyhľadávanie s Laravelom a AJAXom pomocou jQuery

Hoci si aportovanie v dnešnej dobe získalo veľkú popularitu, jQuery AJAX zostáva veľmi populárny v starších projektoch alebo v tímoch, ktoré ho už majú implementovaný. Myšlienka je úplne rovnaká: zachytiť, čo používateľ píše, vykonať asynchrónnu požiadavku a obnoviť DOM.

Typický pracovný postup s jQuery v Laraveli pre živé vyhľadávanie zvyčajne zahŕňa tieto základné kroky: definovať konkrétnu trasu, vytvoriť vyhradený ovládač, vytvoriť pohľad Blade s vyhľadávacím vstupom A nakoniec pridajte kód jQuery, ktorý spúšťa AJAX pri zadávaní.

Proces funguje takto: keď používateľ začne písať, jQuery odošle dotaz na server s vyhľadávacím reťazcom. Laravel filtruje informácie v databáze, vracia JSON so zhodnými výsledkami a jQuery aktualizuje HTML kontajner na stránke tak, aby odrážal zhody, a to všetko v priebehu niekoľkých milisekúnd.

Výhodou používania jQuery je, že V podstate to zhŕňa syntax AJAXu. A je veľmi jednoduché to čítať, ak už máte knižnicu vo svojom projekte. Pridávate však ďalšiu závislosť, ktorá nemusí byť potrebná, ak viete pracovať s moderným JavaScriptom a natívnym načítaním.

Filtrovanie a vyhľadávanie v reálnom čase na frontende pomocou Alpine.js

Keď sú zobrazené údaje relatívne malé (napríklad menej ako 50 XNUMX položiek), nie vždy sa oplatí nastavovať backend so zložitými vyhľadávaniami. V takýchto prípadoch je veľmi pohodlnou možnosťou Filtrujte priamo v prehliadači pomocou Alpine.js, bez toho, aby sa počas písania používateľom odosielali požiadavky na server.

Cieľom je vopred vypočítať vyhľadávací reťazec pre každý prvok (napríklad názov, popis a kategóriu malými písmenami), uložiť ho do atribútu data-search-text a nechať Alpine.js, aby sa postaral o zvyšok. zobraziť alebo skryť prvky podľa písaného textu vo vyhľadávacom poli.

Komponenta Alpine.js môže mať štruktúru podobnú tejto: filtrovaťPoložky

{
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;
},
}

V zobrazení by každá karta alebo riadok údajov niesol atribút text-vyhľadávania-dat s už pripraveným textom malými písmenamiPreto je filter v JavaScripte zredukovaný na funkciu includes(), ktorá je pre krátke zoznamy veľmi rýchla:

<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>

Okrem toho môžete zobraziť prázdny stavový blok iba vtedy, keď Pre aktuálny vyhľadávací výraz nie sú k dispozícii žiadne výsledky.vyzvať používateľa na úpravu textu alebo vymazanie poľa pomocou tlačidla, ktoré jednoducho resetuje vyhľadávanie na prázdny reťazec.

Tento prístup má jasné výhody: Počas vyhľadávania neprebiehajú žiadne volania servera.Interakcia je prakticky okamžitá a logika zostáva vysoko lokálna a ľahko laditeľná. Je to ideálne pre rýchle selektory, modálne okná výberu položiek alebo malé katalógy vložené do stránky Laravelu.

Laravel Scout: Fulltextové vyhľadávanie so špecializovanými nástrojmi

Keď sa veci stanú vážnymi a potrebujete rýchle, relevantné a škálovateľné fulltextové vyhľadávaniaPrirodzenou cestou v Laraveli je Laravel Scout. Scout je integračná vrstva, ktorá vám umožňuje jednoducho prepojiť vaše Eloquent modely s vyhľadávačmi ako Algolia, Meilisearch, vašou vlastnou databázou, kolekciami v pamäti alebo dokonca Elasticsearch prostredníctvom externých kontrolérov.

Ak chcete začať so Scoutom, postupujte podľa zvyčajného postupu vytvoriť nový projekt v Laravel alebo znova použiť existujúciNa spustenie použite Docker (napríklad s Laravel Sail) a potom nainštalujte knižnicu pomocou Composera. Po dokončení publikujte konfiguračný súbor scout.php a upravte premenné prostredia podľa ovládača, ktorý chcete použiť.

Typický pracovný postup by bol nainštalovať Scout s Composerom, publikovať jeho konfiguráciu a aktivovať indexovací front s SCOUT_QUEUE=true V súbore .env zabezpečte, aby sa operácie náročné na zdroje spracovávali na pozadí, čím sa zlepší čas odozvy aplikácií. Okrem toho musíte zabezpečiť, aby DB_HOST odkazoval na databázu, ktorú používate, čo je obzvlášť dôležité, ak používate kontajnery Docker.

Aby sa model mohol zúčastniť vyhľadávania Scout, je potrebné Ak chcete explicitne označiť ako vyhľadávateľné pridaním vlastnosti SearchableNapríklad, ak máte model Vlak, ktorý predstavuje tabuľku vlakov s poľom názvu, môžete ho definovať takto:

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';
}
}

Metóda searchableAs umožňuje prispôsobiť názov indexu vo vyhľadávačiNamiesto použitia predvoleného názvu odvodeného z modelu preberá úlohu Scout. Odtiaľto Scout spracováva synchronizáciu operácií vytvárania, aktualizácie a mazania so vzdialeným alebo lokálnym indexom v závislosti od zvoleného ovládača.

Laravel Scout s Algoliou: Bleskovo rýchle SaaS vyhľadávanie

Algolia je SaaS služba zameraná na ponúkať veľmi rýchle a relevantné vyhľadávania vo veľkých objemoch údajovMá webový panel na správu indexov, pravidiel relevantnosti, synoným atď. a veľmi dobre sa integruje s Laravelom prostredníctvom Scout a oficiálneho PHP klienta.

Ak chcete používať Algoliu so Scoutom, budete musieť nainštalovať jej PHP klienta s Composerom, zaregistrovať svoje prihlasovacie údaje v súbore .env (ID aplikácie a kľúč administrátorského API) a nastaviť SCOUT_DRIVER=algolia aby Scout používal tento engine. Z panela Algolia môžete získať ID aplikácie aj administratívny kľúč.

Po nakonfigurovaní prostredia môžete použiť metódy ako napríklad Train::search('text')->paginate(6) priamo do vašich ovládačov na vykonávanie vyhľadávaní v indexovaných poliach a prijímanie výsledkov v stránkovanom formáte Eloquent, ktoré sú pripravené na prenos do zobrazenia Blade.

Napr.Mohli by ste mať ovládač index ktorá vypíše všetky vlaky alebo vykoná vyhľadávanie, ak je prijatý parameter titlesearch, a metódu create na vloženie nových vlakov do indexu:

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();
}

V príslušnom zobrazení môžete kombinovať formulár na registráciu nových vlakov a ďalší GET formulár s poľom titlesearch, ktoré spustí vyhľadávanie po odoslaní. Potom už len stačí prejsť kolekciou vlakov a zobraziť ich polia v tabuľke, pričom využijete stránkovacie odkazy generované Laravelom.

Scout s Meilisearch, databázou a kolekciami

Ak sa radšej vyhnete externým službám, Meilisearch je vyhľadávač s otvoreným zdrojovým kódom ktoré môžete nasadiť lokálne alebo vo svojej infraštruktúre. Scout sa integruje s Meilisearch veľmi podobným spôsobom ako Algolia, jednoduchou zmenou ovládača a pridaním premenných MEILISEARCH_HOST a MEILISEARCH_KEY do súboru .env.

Ak ho chcete použiť, nainštalujte si PHP klienta Meilisearch, upravte SCOUT_DRIVER=meilisearch a nasmerujte MEILISEARCH_HOST na URL adresu inštancie (napríklad http://127.0.0.1:7700). Ak ste už mali predchádzajúce záznamy, môžete ich indexovať príkazom php artisan scout:import "App\Models\Train", aby ich mal engine k dispozícii.

V menších alebo stredne veľkých aplikáciách si môžete zvoliť aj Databáza vodičov ScoutToto využíva fulltextové indexy a príkazy LIKE vo vašej databáze MySQL alebo PostgreSQL. V tomto prípade nepotrebujete externú službu; jednoducho nastavte SCOUT_DRIVER=database, aby Scout používal samotnú databázu ako vyhľadávací nástroj.

Ďalšou zaujímavou možnosťou je kolekcia ovládačov, ktorá pracuje s kolekciami Eloquent v pamätiTento engine filtruje výsledky pomocou klauzúl WHERE a filtrovania kolekcií a je kompatibilný s akoukoľvek databázou podporovanou Laravelom. Môžete ho aktivovať pomocou `SCOUT_DRIVER=collection` alebo úpravou konfiguračného súboru Scout pre konkrétnejšie nastavenia.

Integrácia s Elasticsearch pomocou Exploreru

Ak vaše vyhľadávacie potreby zahŕňajú práca s obrovskými objemami dát a analýza v reálnom časeElasticsearch je klasika. V ekosystéme Laravel je moderným spôsobom integrácie so Scoutom použitie kontroléra Explorer, ktorý slúži ako most medzi vašimi modelmi a klastrom Elasticsearch.

Na tento účel sa zvyčajne používa Docker spolu s bohatým súborom Docker-compose, ktorý okrem typických služieb (Laravel, MySQL, Redis, Meilisearch atď.) Kontajnery Elasticsearch a KibanaPotom nainštalujete balík jeroen-g/explorer cez Composer a publikujete jeho konfiguračný súbor, aby ste označili, ktoré modely by sa mali indexovať.

V súbore config/explorer.php môžete zaregistrovať svoje modely pod kľúčom indexes, napríklad pridaním App\Modely\Vlak::triedaOkrem toho zmeníte ovládač Scout na elastic v súbore .env s parametrom SCOUT_DRIVER=elastic, aby všetko ukazovalo na Elasticsearch.

V rámci modelu Train musí byť implementované rozhranie Explored a metóda musí byť prepísaná. mapovateľnéAsktorý definuje mapu polí, ktoré sa budú odosielať do indexu. Minimálny príklad by bol:

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,
];
}
}

Odteraz, Vyhľadávanie na Elasticsearch môžete spustiť pomocou rovnakého rozhrania Scout., pričom využíva veľmi nízke časy odozvy a plný výkon dotazov tohto enginu, ale bez opustenia ekosystému Laravel.

So všetkými týmito prístupmi – od základného automatického dopĺňania pomocou fetch alebo jQuery, cez filtrovanie na frontende pomocou Alpine.js až po fulltextové vyhľadávanie pomocou Laravel Scout a rôznych ovládačov – Laravel vám ponúka obrovskú škálu možností na implementáciu vyhľadávania v reálnom čase. prispôsobené veľkosti vášho projektu, požadovanému výkonu a infraštruktúre, ktorú ste ochotní udržiavať.