Komplett guide til sanntidssøk i Laravel

Informatec Digital » Ressurser » Komplett guide til sanntidssøk i Laravel

Når du begynner å jobbe med Laravel og trenger en sanntids søkemotor som svarer umiddelbartDet er lett å gå seg vill blant tusen mulige tilnærminger: AJAX med fetch, jQuery, Alpine.js, Scout med Algolia eller Meilisearch, frontend-filtrering, osv. Den gode nyheten er at Laravel-økosystemet allerede tilbyr praktisk talt alt du trenger for å sette opp et smidig og raskt søk uten å dø i forsøket.

I denne artikkelen ser du hvordan du monterer forskjellige typer sanntidssøk i LaravelFra klassisk AJAX-autofullføring til fulltekstsøk med Laravel Scout og søkemotorer som Algolia, Meilisearch, selve databasen eller til og med Elasticsearch. Du vil også se lette alternativer med Alpine.js for filtrering av data direkte i nettleseren når datavolumet er lite.

Hva er et sanntidssøk i Laravel, og hvordan fungerer det grunnleggende?

Ideen bak et sanntidssøk er at, mens brukeren skriver i et tekstfeltEn spørring utløses, og resultatene oppdateres uten at siden lastes inn på nytt. Teknisk sett involverer dette tre nøkkelkomponenter: Laravel-backend, nettleserens JavaScript og utveksling av data i JSON-format.

På den ene siden, Laravel fungerer som serverlaget Den er ansvarlig for å motta forespørsler, tolke søkeparametere (teksten som skrives inn), spørre databasen og returnere et strukturert svar, vanligvis i JSON-format. Dette svaret kan indikere suksess, feil eller at ingen resultater ble funnet.

I den fjerne enden, JavaScript er ansvarlig for å lytte til brukerhendelser. Send asynkrone forespørsler (AJAX) til backend-systemet i søkeinndataene og vis de returnerte dataene på siden uten at nettleseren utfører en fullstendig oppdatering. Dette kan gjøres med native fetch, jQuery AJAX eller små reaktive biblioteker som Alpine.js.

Med denne grunnleggende mekanismen kan du bygge fra en Enkel autofullføring med få poster, opp til en avansert fulltekstsøkemotor med relevans, paginering og filtre, støttet av biblioteker som Laravel Scout og eksterne søkemotorer optimalisert for søk.

Modell, ruter og kontroller for en grunnleggende sanntidssøkemotor

Før du fordyper deg i JavaScript, må du sørge for at Laravel-siden er godt organisert: en Eloquent-modell å søke på, rydde ruter og en dedikert kontroller å administrere søkelogikken i sanntid.

Det første steget er å ha en Eloquent-modell som representerer tabellen du skal søke i. Tenk deg en tabell over land og en modell som heter Land Veldig enkelt, uten tidsstempler og med tillatt massetildeling:

Eksempel på en minimal Eloquent-modell for søk:

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

Det er angitt her at modellen Pais ligger i standard Laravel-navnerommetDen arver fra Model og lar deg tilordne et hvilket som helst felt med create() ved å la det beskyttede arrayet stå tomt. Ved å deaktivere tidsstempler med public $timestamps = false, unngår du problemer hvis tabellen ikke har kolonnene created_at og updated_at.

Det neste trinnet er å definere rutene som skal håndtere både søkemotorvisningen og AJAX-forespørsleneEt veldig vanlig opplegg kombinerer en GET-rute for å vise visningen og en POST-rute designet for å motta sanntidsspørringer:

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

Rotruten returnerer en velkomstvisning, mens URL-en /search er reservert for søkefunksjonalitetKontrollerens index()-metode viser skjemaet og søkeinndataene, mens search()-metoden behandler asynkrone forespørsler sendt fra nettleseren.

I kontrolleren kan du implementere et veldig praktisk mønster: Forbered en standard responsmatrise i tilfelle feil og bare overskrive den når det faktisk er en gyldig AJAX-forespørsel og spørringen kjøres uten problemer.

Kontrolleren kan ha en lignende struktur dette:

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

På dette tidspunktet har du allerede hele backend-syklusen: innkommende AJAX-forespørsel, kontroll av at det er AJAX, spørring med where like og begrensning av resultater til et rimelig antall ved å bruke take(10) for å unngå overbelastning av databasen. Svaret sendes alltid i JSON, noe som forenkler arbeidet til frontend-systemet betraktelig.

Bladevisning og JavaScript-henting for reaktivt søk

Med modellen, rutene og kontrolleren klare, er det på tide å bygge den synlige delen: et skjema med et søkefelt og en blokk for å vise resultatene, pluss JavaScript-koden som er ansvarlig for å sende forespørsler i bakgrunnen.

Bladvisningen kan være veldig enkel, avhengig av CSRF-token som Laravel injiserer for å validere POST-forespørsler og i et søkeinndata som er praktisk å bruke:

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

I dette eksemplet er skriptet Lytt etter keyup-hendelsen på søkeinndataeneHvert tastetrykk utløser en henteforespørsel til /search-banen. Gjeldende tekst i feltet sendes i JSON-format, og nøkkeloverskrifter som X-Requested-With er inkludert for å indikere at det er AJAX, sammen med CSRF-tokenet for å omgå Laravels innebygde beskyttelse.

Når svaret kommer, transformeres det til JSON og genereres dynamisk. en liten HTML-liste med resultateneeller en melding som «Ingen resultater funnet» når spørringen ikke returnerer data. Alt dette uten å laste inn siden på nytt, på en naturlig måte for brukeren.

Dette mønsteret kan forbedres ytterligere med små UX-detaljer, som å legge til en forsinkelse (avbounce) mellom tastetrykk, vise en laster eller håndtere nettverksfeil for å forhindre at grensesnittet ser ut til å fryse når noe feiler.

Live-søk med Laravel og AJAX ved hjelp av jQuery

Selv om apport har vunnet mye terreng nå for tiden, jQuery AJAX er fortsatt veldig populært i eldre prosjekter eller i team som allerede har det implementert. Ideen er akkurat den samme: fange opp hva brukeren skriver, lage en asynkron forespørsel og oppdatere DOM-en.

En typisk arbeidsflyt med jQuery i Laravel for live-søk inkluderer vanligvis disse grunnleggende trinnene: definer en spesifikk rute, opprett en dedikert kontroller, bygg Blade-visningen med søkeinndataene Og til slutt, legg til jQuery-koden som utløser AJAX når den skrives.

Prosessen fungerer slik: når brukeren begynner å skrive, jQuery sender en spørring til serveren med søkestrengen. Laravel filtrerer informasjonen i databasen, returnerer en JSON med de samsvarende resultatene, og jQuery oppdaterer en HTML-container på siden for å gjenspeile treffene, alt i løpet av millisekunder.

Fordelen med å bruke jQuery er at Det oppsummerer ganske godt syntaksen til AJAX Og det er veldig enkelt å lese hvis du allerede har biblioteket i prosjektet ditt. Du legger imidlertid til en ekstra avhengighet som kanskje ikke er nødvendig hvis du kan jobbe med moderne JavaScript og native fetch.

Sanntidsfiltrering og søk på frontend med Alpine.js

Når dataene som skal vises er relativt små (for eksempel færre enn 50 XNUMX varer), er det ikke alltid verdt å sette opp en backend med komplekse søk. I slike tilfeller er et veldig praktisk alternativ Filtrer direkte i nettleseren med Alpine.js, uten å sende forespørsler til serveren mens brukeren skriver.

Tanken er å forhåndsberegne en søkestreng for hvert element (for eksempel navn, beskrivelse og kategori med små bokstaver), lagre den i et data-search-text-attributt, og la Alpine.js håndtere resten. vis eller skjul elementer i henhold til den skrevne teksten i et søkefelt.

Alpine.js-komponenten kan ha en struktur som ligner på dette: filterelementer

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

I visningen ville hvert kort eller hver rad med data ha et attributt data-søketekst med teksten allerede forberedt med små bokstaverDerfor er filteret redusert til en includes()-funksjon i JavaScript, som er veldig rask for korte lister:

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

I tillegg kan du bare vise en tom tilstandsblokk når Det finnes ingen resultater for det gjeldende søkeordet.inviterer brukeren til å endre teksten eller tømme feltet med en knapp som ganske enkelt tilbakestiller søket til en tom streng.

Denne tilnærmingen har klare fordeler: Det er ingen serverkall under søket.Samhandlingen skjer så godt som umiddelbar, og logikken forblir svært lokal og enkel å feilsøke. Den er perfekt for hurtigvelgere, modaler for varevalg eller små kataloger innebygd i en Laravel-side.

Laravel Scout: Fulltekstsøk med spesialiserte søkemotorer

Når ting blir alvorlige og du trenger det raske, relevante og skalerbare fulltekstsøkDen naturlige veien i Laravel er Laravel Scout. Scout er et integrasjonslag som lar deg enkelt koble Eloquent-modellene dine til søkemotorer som Algolia, Meilisearch, din egen database, minnesamlinger eller til og med Elasticsearch gjennom eksterne kontrollere.

For å komme i gang med Scout er det vanlige opprett et nytt Laravel-prosjekt eller gjenbruk et eksisterendeFor å starte den, bruk Docker (for eksempel med Laravel Sail) og installer deretter biblioteket med Composer. Når det er gjort, publiser konfigurasjonsfilen scout.php og juster miljøvariablene i henhold til driveren du vil bruke.

En typisk arbeidsflyt ville være å installere Scout med Composer, publisere konfigurasjonen og aktiver indekseringskøen med SCOUT_QUEUE=true I .env-filen må du sørge for at ressurskrevende operasjoner behandles i bakgrunnen, noe som forbedrer applikasjonens responstider. I tillegg må du sørge for at DB_HOST peker til databasen du bruker, noe som er spesielt viktig hvis du bruker Docker-containere.

For at en modell skal kunne delta i speidersøk, er det nødvendig å For å eksplisitt markere den som søkbar ved å legge til Søkbar-egenskapenHvis du for eksempel har en togmodell som representerer en tabell over tog med et tittelfelt, kan du definere den slik:

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-metoden tillater tilpass indeksnavnet i søkemotorenI stedet for å bruke standardnavnet som er avledet fra modellen, tar Scout over. Herfra håndterer Scout synkronisering av opprettelses-, oppdaterings- og slettingsoperasjonene med den eksterne eller lokale indeksen, avhengig av den valgte driveren.

Laravel Scout med Algolia: Lynraskt SaaS-søk

Algolia er en SaaS-tjeneste fokusert på å tilby svært raske og relevante søk på tvers av store datamengderDen har et webpanel for å administrere indekser, relevansregler, synonymer osv., og integreres veldig bra med Laravel gjennom Scout og den offisielle PHP-klienten.

For å bruke Algolia med Scout, må du installere PHP-klienten med Composer, registrere påloggingsinformasjonen din i .env-filen (applikasjons-ID og administrator-API-nøkkel), og sett SCOUT_DRIVER=algolia å be Scout om å bruke denne motoren. Fra Algolia-panelet kan du hente både applikasjons-ID-en og administratornøkkelen.

Når miljøet er konfigurert, kan du bruke metoder som Train::search('tekst')->pagerate(6) direkte inn i kontrollerne dine for å utføre søk på de indekserte feltene, og motta resultater i paginert Eloquent-format klare til å sendes til en Blade-visning.

F.eksDu kan ha en kontroller indeks som viser alle tog eller utfører et søk hvis en titlesearch-parameter mottas, og en create-metode for å sette inn nye tog i indeksen:

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

I den tilhørende visningen kan du kombinere et skjema for registrering av nye tog og et annet GET-skjema med et titlesearch-felt som utløser søket ved innsending. Deretter trenger du bare å iterere gjennom samlingen av tog og vise feltene deres i en tabell, og dra nytte av pagineringslenkene generert av Laravel.

Speid med Meilisearch, database og samlinger

Hvis du foretrekker å unngå eksterne tjenester, Meilisearch er en søkemotor med åpen kildekode som du kan distribuere lokalt eller på infrastrukturen din. Scout integreres med Meilisearch på en veldig lik måte som Algolia, ganske enkelt ved å endre driveren og legge til variablene MEILISEARCH_HOST og MEILISEARCH_KEY i .env-filen.

For å bruke den, installerer du Meilisearch PHP-klienten, justerer SCOUT_DRIVER=meilisearch og pek MEILISEARCH_HOST til instansens URL (for eksempel http://127.0.0.1:7700). Hvis du allerede hadde tidligere poster, kan du indeksere dem med kommandoen php artisan scout:import "App\Models\Train" slik at motoren har dem tilgjengelige.

I mindre eller moderate applikasjoner kan du også velge Scout-sjåførdatabaseDette utnytter fulltekstindekser og LIKE-kommandoer på MySQL- eller PostgreSQL-databasen din. I dette tilfellet trenger du ikke en ekstern tjeneste; bare angi SCOUT_DRIVER=database for at Scout skal bruke selve databasen som søkemotor.

Et annet interessant alternativ er driversamling, som fungerer på Eloquent-samlinger i minnetDenne motoren filtrerer resultater ved hjelp av WHERE-klausuler og samlingsfiltrering, og er kompatibel med alle databaser som støttes av Laravel. Du kan aktivere den med `SCOUT_DRIVER=collection` eller ved å justere Scout-konfigurasjonsfilen for mer spesifikke innstillinger.

Integrasjon med Elasticsearch ved hjelp av Explorer

Hvis søkebehovene dine involverer jobber med enorme datamengder og sanntidsanalyseElasticsearch er en klassiker. I Laravel-økosystemet er en moderne måte å integrere det med Scout å bruke Explorer-kontrolleren, som fungerer som en bro mellom modellene dine og en Elasticsearch-klynge.

For å gjøre dette brukes vanligvis Docker, sammen med en rik docker-compose-fil som, i tillegg til de typiske tjenestene (Laravel, MySQL, Redis, Meilisearch, osv.), Elasticsearch- og Kibana-containereDeretter installerer du jeroen-g/explorer-pakken via Composer og publiserer konfigurasjonsfilen for å indikere hvilke modeller som skal indekseres.

I config/explorer.php-filen kan du registrere modellene dine under indexes-nøkkelen, for eksempel ved å legge til App\Modeller\Tog::klasseI tillegg endrer du Scout-driveren til elastic i .env-filen med SCOUT_DRIVER=elastic slik at alt peker til Elasticsearch.

Innenfor Train-modellen må Explored-grensesnittet implementeres og metoden overskrives. mappableAssom definerer kartet over felt som skal sendes til indeksen. Et minimalt eksempel ville være:

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

Fra nå av, Du kan starte søk på Elasticsearch ved å bruke det samme Scout-grensesnittet., som drar nytte av svært lave responstider og den fulle spørrekraften til denne motoren, men uten å forlate Laravel-økosystemet.

Med alle disse tilnærmingene – fra grunnleggende autofullføring med fetch eller jQuery, til frontend-filtrering med Alpine.js, til fulltekstsøk med Laravel Scout og diverse drivere – Laravel gir deg et stort utvalg av alternativer for å implementere søk i sanntid skreddersydd til størrelsen på prosjektet ditt, ytelsen du trenger og infrastrukturen du er villig til å vedlikeholde.