Popoln vodnik za iskanje v realnem času v Laravelu

Informatec Digital » Viri » Popoln vodnik za iskanje v realnem času v Laravelu

Ko začnete delati z Laravelom in potrebujete iskalnik v realnem času, ki se odziva takoj , se zlahka izgubite med tisoč možnimi pristopi: AJAX s fetch, jQuery, Alpine.js, Scout z Algolio ali Meilisearch, filtriranje na frontendu itd. Dobra novica je, da ekosistem Laravel že ponuja praktično vse, kar potrebujete za izgradnjo gladkega in hitrega iskalnika, ne da bi se pri tem preobremenili.

V tem članku se boste naučili, kako implementirati različne vrste iskanja v realnem času v Laravelu , od klasičnega samodokončanja AJAX do iskanja po celotnem besedilu z uporabo Laravel Scout in iskalnikov, kot so Algolia, Meilisearch, same baze podatkov ali celo Elasticsearch. Raziskali boste tudi lahke alternative z Alpine.js za filtriranje podatkov neposredno v brskalniku pri delu z majhnimi nabori podatkov.

Kaj je iskanje v realnem času v Laravelu in kako delujejo osnove?

Ideja iskanja v realnem času je, da se ob vnosu uporabnikovega besedila v besedilno polje sproži poizvedba in rezultati se posodobijo brez ponovnega nalaganja strani. Tehnično gledano to vključuje tri ključne komponente: zaledni sistem Laravel, JavaScript brskalnika in izmenjavo podatkov v formatu JSON.

Po eni strani Laravel deluje kot strežniška plast, odgovorna za sprejemanje zahtev, interpretiranje iskalnih parametrov (vnosanega besedila), poizvedovanje po zbirki podatkov in vračanje strukturiranega odgovora, običajno v formatu JSON. Ta odgovor lahko pomeni uspeh, napako ali da ni bilo najdenih rezultatov.

Na drugi strani JavaScript obravnava poslušanje uporabniških dogodkov v iskalnem vnosu, pošiljanje asinhronih zahtev (AJAX) v zaledni sistem in upodabljanje vrnjenih podatkov na strani brez potrebe po popolni osvežitvi brskalnika. To je mogoče storiti z izvornim fetch, jQuery AJAX ali majhnimi reaktivnimi knjižnicami, kot je Alpine.js.

S tem osnovnim mehanizmom lahko zgradite karkoli, od preprostega samodokončanja z nekaj zapisi do naprednega iskalnika po celotnem besedilu z ustreznostjo, oštevilčenjem strani in filtri, pri čemer se zanašate na knjižnice, kot je Laravel Scout, in zunanje iskalnike, optimizirane za iskanje.

Model, poti in krmilnik za osnovni iskalnik v realnem času

Preden se poglobite v JavaScript, morate imeti dobro organizirano Laravelovo stran: model Eloquent za iskanje, jasne poti in krmilnik, namenjen upravljanju logike iskanja v realnem času.

Prvi korak je imeti model Eloquent, ki predstavlja tabelo, v kateri boste iskali. Predstavljajte si tabelo držav in zelo preprost model z imenom Država , brez časovnih žigov in z dovoljenim množičnim dodeljevanjem:

Primer minimalnega modela Eloquent za iskanja :

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

To pomeni, da se model Pais nahaja v standardnem imenskem prostoru Laravel , deduje od Model in omogoča dodelitev katerega koli polja z metodo create(), tako da varovano polje pustimo prazno. Z onemogočanjem časovnih žigov z javno vrednostjo $timestamps = false se izognete težavam, če tabela nima stolpcev created_at in updated_at.

Naslednji korak je določitev poti, ki bodo obravnavale tako prikaz iskalnika kot zahteve AJAX . Zelo pogosta shema združuje pot GET za prikaz pogleda in pot POST, zasnovano za prejemanje poizvedb v realnem času:

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

Korenska pot vrne pozdravni pogled, medtem ko je URL /search rezerviran za funkcionalnost iskanja . Metoda index() krmilnika prikaže obrazec in iskalni vnos, medtem ko metoda search() obdeluje asinhrone zahteve, poslane iz brskalnika.

V krmilniku lahko implementirate zelo praktičen vzorec: pripravite privzeto polje odgovorov v primeru napake in ga prepišite le, če gre dejansko za veljavno zahtevo AJAX in se poizvedba izvede brez težav.

Krmilnik bi lahko imel podobno strukturo :

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

Na tej točki imate celoten cikel zalednega sistema: dohodna AJAX zahteva, preverjanje, ali gre res za AJAX, poizvedba z uporabo `where like` in omejitev števila rezultatov na razumno količino z `take(10)`, da se prepreči preobremenitev baze podatkov. Odgovor se vedno pošlje v JSON-u, kar močno poenostavi delo frontenda.

Pogled rezila in JavaScript fetch za reaktivno iskanje

Ko so model, poti in krmilnik pripravljeni, je čas za izdelavo vidnega dela: obrazca z iskalnim poljem in blokom za prikaz rezultatov ter JavaScripta, ki je odgovoren za izvajanje zahtev v ozadju.

Pogled Blade je lahko zelo preprost in se zanaša na žeton CSRF , ki ga Laravel vbrizga za potrditev zahtev POST, in na iskalni vnos, ki je priročen za uporabo:

<!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 tem primeru skript posluša dogodek keyup na iskalnem vnosu , zato vsak pritisk tipke sproži zahtevo za pridobivanje na pot /search. Trenutno besedilo polja se pošlje v formatu JSON, vključene pa so tudi ključne glave, kot je X-Requested-With, ki označujejo, da gre za AJAX, skupaj z žetonom CSRF, da se zaobide Laravelova izvorna zaščita.

Ko prispe odgovor, se ta pretvori v JSON in dinamično se generira majhen seznam HTML z rezultati ali pa se prikaže sporočilo, kot je »Ni najdenih rezultatov«, če poizvedba ne vrne podatkov. Vse to se zgodi brez ponovnega nalaganja strani, na naraven način za uporabnika.

Ta vzorec je mogoče dodatno izpopolniti z majhnimi podrobnostmi uporabniške izkušnje, kot so dodajanje odboja med pritiski tipk, prikaz nalagalnika ali obravnavanje omrežnih napak, da se prepreči zamrznitev vmesnika, ko pride do napake.

Iskanje v živo z Laravelom in AJAX-om z uporabo jQueryja

Čeprav je Fetch pridobil na veljavi, ostaja jQuery AJAX zelo priljubljen v starejših projektih ali ekipah, ki ga že imajo integriranega. Ideja je popolnoma enaka: zajeti, kaj uporabnik vnese, narediti asinhrono zahtevo in osvežiti DOM.

Tipičen potek dela z jQuery v Laravelu za iskanje v živo običajno vključuje te osnovne korake: definiranje specifične poti, ustvarjanje namenskega krmilnika, izgradnja pogleda Blade z iskalnim vnosom in na koncu dodajanje kode jQuery, ki sproži AJAX, ko je vtipkan.

Postopek deluje takole: ko uporabnik začne tipkati, jQuery pošlje strežniku poizvedbo z iskalnim nizom. Laravel filtrira informacije v bazi podatkov, vrne objekt JSON z ujemajočimi se rezultati, jQuery pa posodobi vsebnik HTML na strani, da odraža ujemanja, vse v nekaj milisekundah.

Prednost uporabe jQuery je, da močno poenostavi sintakso AJAX in je zelo enostavna za branje, če imate knjižnico že v svojem projektu. Vendar pa uvaja dodatno odvisnost, ki morda ni potrebna, če znate delati s sodobnim JavaScriptom in izvorno funkcijo pridobivanja.

Filtriranje in iskanje v realnem času na frontendu z Alpine.js

Ko je količina podatkov, ki jih je treba prikazati, relativno majhna (na primer manj kot 50 elementov ), ​​se ni vedno splača nastaviti zalednega sistema s kompleksnimi iskanji. V teh primerih je zelo priročna možnost filtriranje neposredno v brskalniku z uporabo Alpine.js , brez pošiljanja zahtev strežniku med tipkanjem uporabnika.

Ideja je, da se za vsak element (npr. ime, opis in kategorija z malimi črkami) vnaprej izračuna iskalni niz, ga shrani v atribut data-search-text in pusti, da Alpine.js obravnava prikazovanje ali skrivanje elementov glede na besedilo, vneseno v iskalno polje.

Komponenta Alpine.js ima lahko podobno strukturo: filterItems

{
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 pogledu bi imela vsaka kartica ali vrstica podatkov atribut data-search-text z že pripravljenim besedilom v malih črkah , zato se filter v JavaScriptu zreducira na includes(), kar je zelo hitro za kratke sezname:

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

Poleg tega lahko prazen blok stanja prikažete le, če za trenutni iskalni izraz ni rezultatov , s čimer uporabnika povabite, da spremeni besedilo ali počisti polje z gumbom, ki preprosto ponastavi iskanje na prazen niz.

Ta pristop ima jasne prednosti: med iskanjem ni klicev strežnika , interakcija je praktično takojšnja, logika pa ostaja zelo lokalna in enostavna za odpravljanje napak. Idealen je za hitre izbirnike, modalna okna za izbiro elementov ali majhne kataloge, vdelane v stran Laravel.

Laravel Scout: Iskanje po celotnem besedilu s specializiranimi iskalniki

Ko stvari postanejo resne in potrebujete hitro, ustrezno in skalabilno iskanje po celotnem besedilu , je naravna pot v Laravelu Laravel Scout. Scout je integracijski sloj, ki vam omogoča enostavno povezovanje vaših modelov Eloquent z iskalniki, kot so Algolia, Meilisearch, vašo bazo podatkov, zbirkami v pomnilniku ali celo Elasticsearch prek zunanjih krmilnikov.

Za začetek dela s Scoutom je običajen pristop ustvariti nov Laravel projekt ali ponovno uporabiti obstoječega , ga zagnati z Dockerjem (na primer z Laravel Sail) in nato namestiti knjižnico s Composerjem. Ko je to storjeno, objavite konfiguracijsko datoteko scout.php in prilagodite okoljske spremenljivke glede na gonilnik, ki ga želite uporabiti.

Tipičen potek dela bi bil namestitev Scouta s Composerjem, objava njegove konfiguracije in omogočanje čakalne vrste za indeksiranje z `SCOUT_QUEUE=true` v datoteki `.env`, tako da se operacije, ki zahtevajo veliko virov, obdelujejo v ozadju in s tem izboljšajo odzivni časi aplikacij. Poleg tega morate zagotoviti, da `DB_HOST` kaže na bazo podatkov, ki jo uporabljate, kar je še posebej pomembno, če uporabljate Dockerjeve vsebnike.

Da bi model sodeloval v iskanjih Scout, mora biti izrecno označen kot iskani z dodajanjem lastnosti `Searchable` . Če imate na primer model `Train`, ki predstavlja tabelo vlakov s poljem `title`, ga lahko definirate takole:

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` vam omogoča , da prilagodite ime indeksa v iskalniku , namesto da uporabite privzeto ime, izpeljano iz modela. Od tam naprej Scout upravlja sinhronizacijo ustvarjanja, posodabljanja in brisanja z oddaljenim ali lokalnim indeksom, odvisno od izbranega gonilnika.

Laravel Scout z Algolio: Bliskovit SaaS iskalnik

Algolia je storitev SaaS, osredotočena na zagotavljanje zelo hitrih in ustreznih iskanj po velikih količinah podatkov . Vsebuje spletno ploščo za upravljanje indeksov, pravil ustreznosti, sinonimov in še več ter se brezhibno integrira z Laravelom prek Scout in uradnega odjemalca PHP.

Za uporabo programa Algolia s programom Scout morate namestiti odjemalca PHP s programom Composer, registrirati svoje poverilnice v datoteki .env (ID aplikacije in skrbniški ključ API) in konfigurirati SCOUT_DRIVER=algolia , da bo program Scout uporabljal ta mehanizem. ID aplikacije in skrbniški ključ lahko dobite na nadzorni plošči programa Algolia.

Ko je okolje nastavljeno, lahko z metodami, kot je Train::search('text')->paginate(6), neposredno v krmilnikih izvedete iskanja po indeksiranih poljih in prejmete rezultate v oštevilčeni obliki Eloquent, ki so pripravljeni za posredovanje v pogled Blade.

Na primer , lahko imate krmilnik indeksa , ki našteje vse vlake ali izvede iskanje, če je posredovan parameter titlesearch, in metodo create za vstavljanje novih vlakov v 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();
}

V ustreznem pogledu lahko združite obrazec za dodajanje novih vlakov in drug obrazec GET z iskalnim poljem po naslovu, ki sproži iskanje ob oddaji. Nato preprosto iterirate skozi zbirko vlakov in prikažete njihova polja v tabeli, pri čemer izkoristite povezave za oštevilčenje, ki jih generira Laravel.

Skavt z Meilisearch, podatkovno bazo in zbirkami

Če se želite izogniti zunanjim storitvam, je Meilisearch odprtokodni iskalnik , ki ga lahko namestite lokalno ali na svojo infrastrukturo. Scout se z Meilisearchom integrira na zelo podoben način kot Algolia, preprosto s spremembo gonilnika in dodajanjem spremenljivk MEILISEARCH_HOST in MEILISEARCH_KEY v datoteko .env.

Če ga želite uporabiti, namestite odjemalca Meilisearch PHP, nastavite SCOUT_DRIVER=meilisearch in usmerite MEILISEARCH_HOST na URL primerka (na primer http://127.0.0.1:7700). Če že imate zapise, jih lahko indeksirate z ukazom php artisan scout:import "App\Models\Train", da jih bo imel iskalnik na voljo.

Za manjše ali srednje velike aplikacije lahko izberete tudi gonilnik baze podatkov Scout , ki uporablja indekse celotnega besedila in stavke LIKE v vaši bazi podatkov MySQL ali PostgreSQL. V tem primeru ne potrebujete zunanje storitve; preprosto nastavite SCOUT_DRIVER=database, da bo Scout uporabljal samo bazo podatkov kot iskalnik.

Druga zanimiva možnost je gonilnik zbirk, ki deluje z zbirkami Eloquent v pomnilniku . Ta mehanizem filtrira rezultate z uporabo metod `where` in filtriranja zbirk ter je združljiv s katero koli bazo podatkov, ki jo podpira Laravel. Aktivirate ga lahko z `SCOUT_DRIVER=collection` ali s prilagoditvijo konfiguracijske datoteke Scout, če želite nekaj bolj specifičnega.

Integracija z Elasticsearchom z uporabo Explorerja

Če vaše iskalne potrebe vključujejo delo z ogromnimi količinami podatkov in analitiko v realnem času , je Elasticsearch klasika. V ekosistemu Laravel je sodoben način integracije s Scoutom uporaba krmilnika Explorer, ki deluje kot most med vašimi modeli in gručo Elasticsearch.

To običajno vključuje delo z Dockerjem in bogato datoteko docker-compose, ki poleg običajnih storitev (Laravel, MySQL, Redis, Meilisearch itd.) zažene tudi vsebnike Elasticsearch in Kibana . Nato namestite paket jeroen-g/explorer prek Composerja in objavite njegovo konfiguracijsko datoteko, da določite, kateri modeli naj bodo indeksirani.

V datoteki config/explorer.php lahko registrirate svoje modele pod ključem indexes, na primer tako, da dodate App\Models\Train::class . Poleg tega v datoteki .env spremenite gonilnik iz Scout v Elasticsearch s SCOUT_DRIVER=elastic, tako da vse kaže na Elasticsearch.

Znotraj modela Train morate implementirati vmesnik Explored in preglasiti metodo mappableAs , ki definira zemljevid polj, ki jih je treba poslati indeksu. Minimalni primer bi bil:

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 tu lahko z istim vmesnikom Scout zaženete iskanja na Elasticsearchu , pri čemer izkoristite zelo nizke odzivne čase in polno moč poizvedb tega mehanizma, ne da bi pri tem zapustili ekosistem Laravel.

Z vsemi temi pristopi – od osnovnega samodokončanja s fetch ali jQuery do filtriranja na frontendu z Alpine.js in iskanja po celotnem besedilu z Laravel Scout in različnimi gonilniki – vam Laravel ponuja ogromno možnosti za implementacijo iskanja v realnem času, prilagojenih velikosti vašega projekta, potrebni zmogljivosti in infrastrukturi, ki jo želite vzdrževati.