Kompletan vodič za pretragu u realnom vremenu u Laravelu

Informatec Digital » Resursi » Kompletan vodič za pretragu u realnom vremenu u Laravelu

Kada počnete raditi s Laravelom i trebate pretraživač u realnom vremenu koji odmah reagujeLako se izgubiti među hiljadu mogućih pristupa: AJAX sa fetch, jQuery, Alpine.js, Scout sa Algoliom ili Meilisearchom, filtriranje na frontendu itd. Dobra vijest je da Laravel ekosistem već pruža praktično sve što vam je potrebno za postavljanje glatke i brze pretrage bez gubitka u pokušaju.

U ovom članku ćete vidjeti kako se sastavlja Različite vrste pretrage u realnom vremenu u LaraveluOd klasičnog AJAX automatskog dovršavanja do pretraživanja cijelog teksta pomoću Laravel Scout-a i pretraživača poput Algolie, Meilisearch-a, same baze podataka ili čak Elasticsearch-a. Također ćete vidjeti lagane alternative s Alpine.js-om za filtriranje podataka direktno u pregledniku kada je količina podataka mala.

Šta je pretraga u realnom vremenu u Laravelu i kako osnove funkcionišu?

Ideja koja stoji iza pretrage u realnom vremenu je da, dok korisnik kuca u tekstualno poljeUpit se pokreće i rezultati se ažuriraju bez ponovnog učitavanja stranice. Tehnički, ovo 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 pretrage (unesenog teksta), slanje upita bazi podataka i vraćanje strukturiranog odgovora, obično u JSON formatu. Ovaj odgovor može ukazivati ​​na uspjeh, grešku ili da nisu pronađeni rezultati.

na drugom kraju, JavaScript je odgovoran za osluškivanje korisničkih događaja. Na ulazu za pretragu, pošaljite asinhrone zahtjeve (AJAX) backendu i prikažite vraćene podatke na stranici bez potpunog osvježavanja od strane preglednika. To se može uraditi pomoću nativnog dohvata, jQuery AJAX-a ili malih reaktivnih biblioteka poput Alpine.js.

Pomoću ovog osnovnog mehanizma 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 pretragu.

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 pretrage u realnom vremenu.

Prvi korak je imati Eloquent model koji predstavlja tabelu u kojoj ćete pretraživati. Zamislite tabelu zemalja i model pod nazivom zemlja Vrlo jednostavno, bez vremenskih oznaka i sa dozvoljenim grupnim dodjeljivanjem:

Primjer minimalnog Eloquent modela za pretrage:

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ćava vam da dodijelite bilo koje polje pomoću create() tako što ćete ostaviti zaštićeni niz praznim. Onemogućavanjem vremenskih oznaka pomoću public $timestamps = false, izbjegavate probleme ako tabela nema kolone created_at i updated_at.

Sljedeći korak je definirati rute koje će obraditi i prikaz pretraživača i AJAX zahtjeveVrlo uobičajena shema kombinira GET rutu za prikaz prikaza 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']);

Korijen rute vraća pozdravni prikaz, dok URL /search je rezervisan za funkcionalnost pretrageKontrolerova metoda index() prikazuje obrazac i unos za pretragu, 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 greške i prepisati ga samo kada je zaista validan AJAX zahtjev i upit se izvrši bez problema.

Kontroler bi mogao imati slična struktura 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 da li je AJAX, upiti sa "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 znatno pojednostavljuje rad frontenda.

Blade prikaz i JavaScript dohvat za reaktivno pretraživanje

Kada su model, rute i kontroler spremni, vrijeme je za izgradnju vidljivog dijela: obrazac s poljem za pretraživanje i blokom za prikaz rezultata, plus JavaScript koji je 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 pretragu 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 pretraguSvaki pritisak tipke pokreće zahtjev za dohvaćanje prema putanji /search. Trenutni tekst polja se šalje u JSON formatu, a uključeni su i ključni zaglavlja poput X-Requested-With kako bi se naznačilo da je u pitanju AJAX, zajedno s CSRF tokenom kako bi se zaobišla Laravelova izvorna zaštita.

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

Ovaj obrazac se može dodatno usavršiti malim UX detaljima, kao što je dodavanje kašnjenje (debounce) između pritisaka tipki, prikazati program za učitavanje ili obraditi mrežne greške kako bi se spriječilo da interfejs izgleda zamrznuto kada nešto ne uspije.

Pretraga uživo sa Laravelom i AJAX-om koristeći jQuery

Iako je donošenje danas dobilo na značaju, jQuery AJAX ostaje veoma popularan u naslijeđenim projektima ili u timovima koji ga već imaju implementiranog. Ideja je potpuno ista: snimiti ono što korisnik ukuca, napraviti asinhroni zahtjev i osvježiti DOM.

Tipičan radni tok sa jQuery u Laravelu za pretragu uživo obično uključuje ove osnovne korake: definirati određenu rutu, kreirati namjenski kontroler, izgraditi Blade prikaz s unosom za pretragu I na kraju, dodajte jQuery kod koji aktivira AJAX prilikom upisivanja.

Proces funkcioniše ovako: kada korisnik počne kucati, jQuery šalje upit serveru sa stringom za pretragu. Laravel filtrira informacije u bazi podataka, vraća JSON sa odgovarajućim rezultatima, a jQuery ažurira HTML kontejner na stranici kako bi odražavao podudaranja, sve u roku od 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 zavisnost koja možda nije potrebna ako možete raditi s modernim JavaScriptom i izvornim dohvatom.

Filtriranje i pretraga u realnom vremenu na frontendu pomoću Alpine.js-a

Kada su podaci koji se prikazuju relativno mali (na primjer, manje od 50 artikala), nije uvijek isplativo postavljati backend sa složenim pretragama. U tim slučajevima, vrlo praktična opcija je Filtrirajte direktno u pregledniku pomoću Alpine.js, bez slanja zahtjeva serveru dok korisnik kuca.

Ideja je da se unaprijed izračuna niz za pretragu za svaki element (na primjer, naziv, opis i kategorija malim slovima), pohrani ga u atribut data-search-text i prepusti Alpine.js-u da se pobrine za ostalo. prikažite ili sakrijte elemente u skladu s pisanim tekstom u polje za pretragu.

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 bi nosio atribut tekst-pretrage-data s već pripremljenim tekstom napisanim 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 pretragu.pozivajući korisnika da izmijeni tekst ili obriše polje pomoću dugmeta koje jednostavno resetuje pretragu na prazan niz.

Ovaj pristup ima jasne prednosti: Nema poziva serveru tokom pretrage.Interakcija je praktično trenutna, a logika ostaje visoko lokalna i jednostavna za debugiranje. Savršeno je za brze selektore, modalne prozore za odabir artikala ili male kataloge ugrađene u Laravel stranicu.

Laravel Scout: Pretraga cijelog teksta sa specijaliziranim pretraživačima

Kada stvari postanu ozbiljne i kada vam zatrebaju brze, relevantne i skalabilne pretrage cijelog tekstaPrirodni put u Laravelu je Laravel Scout. Scout je integracijski sloj koji vam omogućava da jednostavno povežete svoje Eloquent modele sa pretraživačima poput Algolie, Meilisearcha, vlastitom bazom podataka, kolekcijama u memoriji ili čak Elasticsearchom putem eksternih kontrolera.

Za početak rada sa Scoutom, uobičajena stvar je kreirajte novi Laravel projekat ili ponovo koristite postojećiDa biste ga pokrenuli, koristite Docker (na primjer, sa Laravel Sail-om), a zatim instalirajte biblioteku pomoću Composera. Nakon što to završite, objavite konfiguracijsku datoteku scout.php i prilagodite varijable okruženja prema drajveru koji želite koristiti.

Tipičan tijek rada bi bio instaliranje Scouta s Composerom, objavljivanje njegove konfiguracije i aktivirajte red za indeksiranje sa SCOUT_QUEUE=true U .env datoteci osigurajte da se operacije koje zahtijevaju mnogo 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 učestvovao u pretragama Scout-a, potrebno je Da biste ga eksplicitno označili kao pretraživo dodavanjem osobine SearchableNa primjer, ako imate model voza koji predstavlja tabelu vozova s ​​poljem naslova, možete 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ćava prilagodite naziv indeksa u pretraživačuUmjesto korištenja zadanog imena izvedenog iz modela, Scout preuzima kontrolu. Odavde, Scout upravlja sinhronizacijom operacija kreiranja, ažuriranja i brisanja s udaljenim ili lokalnim indeksom, ovisno o odabranom upravljačkom programu.

Laravel Scout sa Algolijom: Munjevito brzo SaaS pretraživanje

Algolia je SaaS usluga fokusirana na ponuditi vrlo brze i relevantne pretrage među velikim količinama podatakaIma web panel za upravljanje indeksima, pravilima relevantnosti, sinonimima itd., i vrlo dobro se integrira s Laravelom putem Scouta i službenog PHP klijenta.

Da biste koristili Algoliu sa Scoutom, morat ćete instalirati njen PHP klijent sa Composerom, registrirati svoje vjerodajnice u .env datoteci (ID aplikacije i administratorski API ključ) i postavi SCOUT_DRIVER=algolia da kažete Scoutu da koristi ovaj mehanizam. Iz Algolia panela možete dobiti i ID aplikacije i administrativni ključ.

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

Na primjerMogli biste imati kontroler indeks koja navodi sve vozove ili vrši pretragu ako je primljen parametar titlesearch, i metodu create za umetanje novih vozova 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 kombinovati obrazac za prijavu novih vozova i još jedan GET obrazac sa poljem za pretragu naslova koje pokreće pretragu nakon slanja. Zatim samo trebate iterirati kroz kolekciju vozova i prikazati njihova polja u tabeli, koristeći prednosti paginacijskih linkova koje generiše Laravel.

Izviđač sa Meilisearchom, bazom podataka i kolekcijama

Ako želite izbjeći vanjske usluge, Meilisearch je pretraživač otvorenog koda. koji možete implementirati lokalno ili na vašoj 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" tako da ih mehanizam ima dostupne.

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

Još jedna zanimljiva opcija je kolekcija drajvera, koja radi na Eloquent kolekcijama u memorijiOvaj mehanizam filtrira rezultate koristeći WHERE klauzule i filtriranje kolekcija, te je kompatibilan sa bilo kojom bazom podataka koju podržava Laravel. Možete ga aktivirati pomoću `SCOUT_DRIVER=kolekcija` ili podešavanjem Scout konfiguracijske datoteke za specifičnije postavke.

Integracija sa Elasticsearchom pomoću Explorera

Ako vaše potrebe pretrage uključuju rad s ogromnim količinama podataka i analiza u realnom vremenuElasticsearch je klasik. U Laravel ekosistemu, 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, pored tipičnih servisa (Laravel, MySQL, Redis, Meilisearch, itd.), Kontejneri Elasticsearch i KibanaZatim instalirate paket jeroen-g/explorer putem Composera i objavljujete njegovu konfiguracijsku datoteku kako biste naznačili koji modeli trebaju biti indeksirani.

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

Unutar modela Train, interfejs Explored mora biti implementiran i metoda mora biti prepisana. mapableAsšto definira mapu polja koja će biti poslana indeksu. Minimalni primjer bi bio:

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

Od sada, Možete pokrenuti pretrage na Elasticsearchu koristeći isti Scout interfejs., koristeći prednosti vrlo niskog vremena odziva i pune snage upita ovog engine-a, ali bez napuštanja Laravel ekosistema.

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 drajverima - Laravel vam nudi ogroman raspon opcija za implementaciju pretraga u realnom vremenu. prilagođeno veličini vašeg projekta, performansama koje su vam potrebne i infrastrukturi koju ste spremni održavati.