Potpuni vodič za pretraživanje u stvarnom vremenu u Laravelu

Informatec Digital » Sredstva » Potpuni vodič za pretraživanje u stvarnom vremenu u Laravelu

Kada počnete raditi s Laravelom i trebate tražilica u stvarnom vremenu koja odmah reagiraLako se izgubiti među tisuću mogućih pristupa: AJAX s fetchom, jQuery, Alpine.js, Scout s Algoliom ili Meilisearchom, filtriranje na frontendu itd. Dobra je vijest da Laravel ekosustav već pruža praktički sve što vam je potrebno za postavljanje glatkog i brzog pretraživanja bez gubitka u pokušaju.

U ovom članku ćete vidjeti kako sastaviti različite vrste pretraživanja u stvarnom vremenu u LaraveluOd klasičnog AJAX automatskog dovršavanja do pretraživanja cijelog teksta s Laravel Scoutom i tražilicama poput Algolije, Meilisearcha, same baze podataka ili čak Elasticsearcha. Također ćete vidjeti lagane alternative s Alpine.js-om za filtriranje podataka izravno u pregledniku kada je količina podataka mala.

Što je pretraživanje u stvarnom vremenu u Laravelu i kako osnove funkcioniraju?

Ideja koja stoji iza pretrage u stvarnom vremenu je da, dok korisnik tipka u tekstualno poljeUpit se pokreće i rezultati se ažuriraju bez ponovnog učitavanja stranice. Tehnički, to uključuje tri ključne komponente: Laravel backend, JavaScript preglednika i razmjenu podataka u JSON formatu.

S jedne strane, Laravel djeluje kao serverski sloj Odgovoran je za primanje zahtjeva, interpretiranje parametara pretraživanja (unesenog teksta), slanje upita bazi podataka i vraćanje strukturiranog odgovora, obično u JSON formatu. Ovaj odgovor može ukazivati ​​na uspjeh, pogrešku ili da nisu pronađeni rezultati.

Na drugom kraju, JavaScript je odgovoran za osluškivanje korisničkih događaja. Na unosu za pretraživanje, pošaljite asinhrone zahtjeve (AJAX) pozadinskom sustavu i prikažite vraćene podatke na stranici bez potpunog osvježavanja preglednika. To se može učiniti pomoću izvornog dohvaćanja, jQuery AJAX-a ili malih reaktivnih biblioteka poput Alpine.js.

S ovim osnovnim mehanizmom možete graditi od Jednostavno automatsko dovršavanje s nekoliko zapisa, pa sve do napredne tražilice punog teksta s relevantnošću, paginacijom i filterima, podržane bibliotekama poput Laravel Scout-a i vanjskim tražilicama optimiziranim za pretraživanje.

Model, rute i kontroler za osnovnu tražilicu u stvarnom vremenu

Prije nego što se upustite u JavaScript, morate se uvjeriti da je Laravel strana dobro organizirana: elokventan model za pretraživanje, jasne rute i namjenski kontroler upravljati logikom pretraživanja u stvarnom vremenu.

Prvi korak je imati Eloquent model koji predstavlja tablicu u kojoj ćete pretraživati. Zamislite tablicu zemalja i model pod nazivom Zemlja Vrlo jednostavno, bez vremenskih oznaka i s dopuštenim skupnim dodjeljivanjem:

Primjer minimalnog Eloquent modela za pretraživanja:

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

Ovdje je naznačeno da model Pais se nalazi u standardnom Laravel imenskom prostoru.Nasljeđuje od Modela i omogućuje vam dodjeljivanje bilo kojeg polja pomoću create() ostavljajući zaštićeni niz praznim. Onemogućavanjem vremenskih oznaka s public $timestamps = false izbjegavate probleme ako tablica nema stupce created_at i updated_at.

Sljedeći korak je definirati rute koje će obraditi i prikaz tražilice i AJAX zahtjeveVrlo uobičajena shema kombinira GET rutu za prikaz pogleda i POST rutu dizajniranu za primanje upita u stvarnom vremenu:

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

Korijenska ruta vraća pozdravni prikaz, dok URL /search je rezerviran za funkciju pretraživanjaKontrolerova metoda index() prikazuje obrazac i unos za pretraživanje, dok metoda search() obrađuje asinhrone zahtjeve poslane iz preglednika.

U kontroleru možete implementirati vrlo praktičan obrazac: Pripremite zadani niz odgovora u slučaju pogreške i prebrisati ga samo kada je to doista valjan AJAX zahtjev i upit se izvrši bez problema.

Kontroler bi mogao imati slična struktura na ovo:

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

U ovom trenutku već imate kompletan backend ciklus: dolazni AJAX zahtjev, provjera je li AJAX, upiti s "where like" i ograničavanje rezultata na razuman broj koristeći take(10) kako bi se izbjeglo preopterećenje baze podataka. Odgovor se uvijek šalje u JSON formatu, što uvelike pojednostavljuje rad frontenda.

Prikaz oštrice i JavaScript dohvaćanje za reaktivno pretraživanje

S modelom, rutama i kontrolerom spremnim, vrijeme je za izgradnju vidljivog dijela: obrazac s poljem za pretraživanje i blokom za prikaz rezultata, plus JavaScript odgovoran za slanje zahtjeva u pozadini.

Pogled na oštricu može biti vrlo jednostavan, oslanjajući se na CSRF token koji Laravel ubrizgava za validaciju POST zahtjeva i u unosu za pretraživanje koji je praktičan za korištenje:

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

U ovom primjeru skripta Osluškujte događaj keyup na unosu za pretraživanjeSvaki pritisak tipke pokreće zahtjev za dohvaćanje prema putanji /search. Trenutni tekst polja šalje se u JSON formatu, a uključeni su ključni zaglavlja poput X-Requested-With kako bi se naznačilo da je riječ o AJAX-u, zajedno s CSRF tokenom kako bi se zaobišla Laravelova izvorna zaštita.

Kada stigne odgovor, on se transformira u JSON i dinamički generira. mala HTML lista s rezultatimaili poruku poput „Nisu pronađeni rezultati“ kada upit ne vrati nikakve podatke. Sve to bez ponovnog učitavanja stranice, na prirodan način za korisnika.

Ovaj uzorak se može dodatno poboljšati malim UX detaljima, kao što je dodavanje kašnjenje (debounce) između pritisaka tipki, prikazati program za učitavanje ili obraditi mrežne pogreške kako bi se spriječilo zamrzavanje sučelja kada nešto ne uspije.

Pretraživanje uživo s Laravelom i AJAX-om koristeći jQuery

Iako je dohvaćanje danas dobilo na značaju, jQuery AJAX ostaje vrlo popularan u naslijeđenim projektima ili u timovima koji ga već imaju implementiranog. Ideja je potpuno ista: snimiti što korisnik upiše, napraviti asinkroni zahtjev i osvježiti DOM.

Tipičan tijek rada s jQueryjem u Laravelu za pretraživanje uživo obično uključuje ove osnovne korake: definirati određenu rutu, stvoriti namjenski kontroler, izgraditi Blade prikaz s unosom za pretraživanje I na kraju, dodajte jQuery kod koji aktivira AJAX dok se tipka.

Proces funkcionira ovako: kada korisnik počne tipkati, jQuery šalje upit serveru s nizom za pretraživanje. Laravel filtrira informacije u bazi podataka, vraća JSON s odgovarajućim rezultatima, a jQuery ažurira HTML spremnik na stranici kako bi odražavao podudaranja, sve u nekoliko milisekundi.

Prednost korištenja jQueryja je u tome što To prilično dobro sažima sintaksu AJAX-a I vrlo je jednostavno za čitanje ako već imate biblioteku u svom projektu. Međutim, dodajete dodatnu ovisnost koja možda nije potrebna ako možete raditi s modernim JavaScriptom i izvornim dohvaćanjem.

Filtriranje i pretraživanje u stvarnom vremenu na frontendu pomoću Alpine.js-a

Kada su podaci koji se prikazuju relativno mali (npr. manje od 50 artikala), nije uvijek isplativo postavljati pozadinski sustav sa složenim pretragama. U tim slučajevima, vrlo praktična opcija je Filtrirajte izravno u pregledniku pomoću Alpine.js-a, bez slanja zahtjeva poslužitelju dok korisnik tipka.

Ideja je unaprijed izračunati niz za pretraživanje za svaki element (na primjer, naziv, opis i kategoriju malim slovima), pohraniti ga u atribut data-search-text i pustiti Alpine.js da se pobrine za ostalo. prikaži ili sakrij elemente prema pisanom tekstu u polju za pretraživanje.

Komponenta Alpine.js može imati strukturu sličnu ovoj: filtriraj stavke

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

U prikazu, svaka kartica ili red podataka nosio bi atribut tekst-pretrage-data s već pripremljenim tekstom malim slovimaStoga se filter svodi na funkciju includes() u JavaScriptu, koja je vrlo brza za kratke liste:

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

Osim toga, prazan blok stanja možete prikazati samo kada Nema rezultata za trenutni pojam za pretraživanje.pozivajući korisnika da izmijeni tekst ili izbriše polje pomoću gumba koji jednostavno resetira pretragu na prazan niz.

Ovaj pristup ima jasne prednosti: Tijekom pretrage nema poziva poslužitelju.Interakcija je gotovo trenutna, a logika ostaje vrlo lokalna i jednostavna za otklanjanje pogrešaka. Savršeno je za brze selektore, modalne prozore za odabir stavki ili male kataloge ugrađene u Laravel stranicu.

Laravel Scout: Pretraživanje cijelog teksta sa specijaliziranim tražilicama

Kad stvari postanu ozbiljne i kad ti zatrebaju brze, relevantne i skalabilne pretrage cijelog tekstaPrirodni put u Laravelu je Laravel Scout. Scout je integracijski sloj koji vam omogućuje jednostavno povezivanje vaših Eloquent modela s tražilicama poput Algolie, Meilisearcha, vlastitom bazom podataka, kolekcijama u memoriji ili čak Elasticsearchom putem vanjskih kontrolera.

Za početak rada sa Scoutom, uobičajena stvar je stvoriti novi Laravel projekt ili ponovno upotrijebiti postojećiZa pokretanje koristite Docker (na primjer, s Laravel Sailom) i zatim instalirajte biblioteku s Composerom. Nakon što to učinite, objavite konfiguracijsku datoteku scout.php i prilagodite varijable okruženja prema upravljačkom programu koji želite koristiti.

Tipičan tijek rada bio bi instalirati Scout s Composerom, objaviti njegovu konfiguraciju i aktivirajte red za indeksiranje s SCOUT_QUEUE=true U .env datoteci osigurajte da se operacije koje zahtijevaju puno resursa obrađuju u pozadini, poboljšavajući vrijeme odziva aplikacije. Osim toga, morate osigurati da DB_HOST pokazuje na bazu podataka koju koristite, što je posebno važno ako koristite Docker kontejnere.

Da bi model sudjelovao u pretragama Scout-a, potrebno je Da biste ga eksplicitno označili kao pretraživo dodavanjem svojstva SearchableNa primjer, ako imate model vlaka koji predstavlja tablicu vlakova s ​​poljem naslova, mogli biste ga definirati ovako:

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

Metoda searchableAs omogućuje prilagodite naziv indeksa u tražiliciUmjesto korištenja zadanog imena izvedenog iz modela, Scout preuzima kontrolu. Odavde Scout upravlja sinkronizacijom operacija stvaranja, ažuriranja i brisanja s udaljenim ili lokalnim indeksom, ovisno o odabranom upravljačkom programu.

Laravel Scout s Algolijom: Munjevito brzo SaaS pretraživanje

Algolia je SaaS usluga usmjerena na ponuditi vrlo brza i relevantna pretraživanja velikih količina podatakaIma web panel za upravljanje indeksima, pravilima relevantnosti, sinonimima itd. i vrlo se dobro integrira s Laravelom putem Scouta i službenog PHP klijenta.

Za korištenje Algolije sa Scoutom, morat ćete instalirati njezin PHP klijent s Composerom, registrirati svoje vjerodajnice u .env datoteci (ID aplikacije i administratorski API ključ) i postavi SCOUT_DRIVER=algolia da biste rekli Scoutu da koristi ovaj mehanizam. Iz Algolia panela možete dobiti i ID aplikacije i administratorski ključ.

Nakon što je okruženje konfigurirano, možete koristiti metode kao što su Train::search('text')->paginate(6) izravno u vaše kontrolere za pretraživanje indeksiranih polja, primajući rezultate u paginiranom Eloquent formatu spremnim za prosljeđivanje Blade prikazu.

Na primjerMogli biste imati kontroler indeks koja navodi sve vlakove ili izvršava pretraživanje ako je primljen parametar titlesearch i metodu create za umetanje novih vlakova u indeks:

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

U odgovarajućem prikazu možete kombinirati obrazac za prijavu novih vlakova i još jedan GET obrazac s poljem za pretraživanje naslova koje pokreće pretraživanje nakon slanja. Zatim samo trebate iterirati kroz kolekciju vlakova i prikazati njihova polja u tablici, koristeći prednosti paginacijskih poveznica koje generira Laravel.

Izviđač s Meilisearchom, bazom podataka i zbirkama

Ako želite izbjeći vanjske usluge, Meilisearch je tražilica otvorenog koda koji možete implementirati lokalno ili na svojoj infrastrukturi. Scout se integrira s Meilisearchom na vrlo sličan način kao i Algolia, jednostavnom promjenom upravljačkog programa i dodavanjem varijabli MEILISEARCH_HOST i MEILISEARCH_KEY u .env datoteku.

Da biste ga koristili, instalirate Meilisearch PHP klijent, prilagodite SCOUT_DRIVER=meilisearch i usmjerite MEILISEARCH_HOST na URL instance (na primjer, http://127.0.0.1:7700). Ako ste već imali prethodne zapise, možete ih indeksirati naredbom php artisan scout:import "App\Models\Train" kako bi ih tražilica imala dostupne.

U manjim ili umjerenim primjenama možete odabrati i Baza podataka vozača izviđačaOvo koristi indekse cijelog teksta i LIKE naredbe na vašoj MySQL ili PostgreSQL bazi podataka. U ovom slučaju, ne trebate vanjsku uslugu; jednostavno postavite SCOUT_DRIVER=database da bi Scout koristio samu bazu podataka kao tražilicu.

Još jedna zanimljiva opcija je kolekcija upravljačkih programa, koja radi na Eloquent kolekcijama u memorijiOvaj mehanizam filtrira rezultate pomoću WHERE klauzula i filtriranja kolekcija te je kompatibilan s bilo kojom bazom podataka koju podržava Laravel. Možete ga aktivirati pomoću `SCOUT_DRIVER=collection` ili prilagođavanjem Scout konfiguracijske datoteke za specifičnije postavke.

Integracija s Elasticsearchom pomoću Explorera

Ako vaše potrebe za pretragom uključuju rad s ogromnim količinama podataka i analiza u stvarnom vremenuElasticsearch je klasik. U Laravel ekosustavu, moderan način integracije sa Scoutom je korištenje Explorer kontrolera, koji djeluje kao most između vaših modela i Elasticsearch klastera.

Za to se obično koristi Docker, zajedno s bogatom docker-compose datotekom koja, uz tipične servise (Laravel, MySQL, Redis, Meilisearch, itd.), Kontejneri Elasticsearch i KibanaZatim instalirate paket jeroen-g/explorer putem Composera i objavite njegovu konfiguracijsku datoteku kako biste naznačili koje modele treba indeksirati.

U datoteci config/explorer.php možete registrirati svoje modele pod ključem indexes, na primjer dodavanjem Aplikacija\Modeli\Vlak::klasaOsim toga, mijenjate Scout upravljački program na elastic u .env datoteci sa SCOUT_DRIVER=elastic tako da sve ukazuje na Elasticsearch.

Unutar modela Train, sučelje Explored mora biti implementirano, a metoda nadjačana. mapableAsšto definira mapu polja koja će se poslati indeksu. Minimalni primjer bio bi:

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

Odsada pa nadalje, Pretraživanja na Elasticsearchu možete pokrenuti koristeći isto Scout sučelje., koristeći prednosti vrlo niskog vremena odziva i pune snage upita ovog engine-a, ali bez napuštanja Laravel ekosustava.

Sa svim ovim pristupima - od osnovnog automatskog dovršavanja s fetch ili jQuery, do filtriranja frontenda s Alpine.js, do pretraživanja cijelog teksta s Laravel Scout i raznim upravljačkim programima - Laravel vam nudi ogroman raspon opcija za implementaciju pretraživanja u stvarnom vremenu prilagođeno veličini vašeg projekta, potrebnim performansama i infrastrukturi koju ste spremni održavati.