Komplet guide til realtidssøgning i Laravel

Informatic Digital » Recursos » Komplet guide til realtidssøgning i Laravel

Når du begynder at arbejde med Laravel og har brug for en en realtidssøgemaskine, der reagerer øjeblikkeligtDet er nemt at fare vild blandt tusind mulige tilgange: AJAX med fetch, jQuery, Alpine.js, Scout med Algolia eller Meilisearch, frontend-filtrering osv. Den gode nyhed er, at Laravel-økosystemet allerede leverer praktisk talt alt, hvad du behøver for at opsætte en problemfri og hurtig søgning uden at dø i forsøget.

I denne artikel kan du se, hvordan du samler Forskellige typer realtidssøgning i LaravelFra klassisk AJAX-autofuldførelse til fuldtekstsøgninger med Laravel Scout og søgemaskiner som Algolia, Meilisearch, selve databasen eller endda Elasticsearch. Du vil også se letvægtsalternativer med Alpine.js til filtrering af data direkte i browseren, når datamængden er lille.

Hvad er en realtidssøgning i Laravel, og hvordan fungerer det grundlæggende?

Ideen bag en realtidssøgning er, at når brugeren skriver i et tekstfeltEn forespørgsel udløses, og resultaterne opdateres uden at genindlæse siden. Teknisk set involverer dette tre nøglekomponenter: Laravel-backend, browserens JavaScript og udveksling af data i JSON-format.

På den ene side, Laravel fungerer som serverlaget Den er ansvarlig for at modtage anmodninger, fortolke søgeparametre (den indtastede tekst), forespørge databasen og returnere et struktureret svar, normalt i JSON-format. Dette svar kan indikere succes, fejl eller at der ikke blev fundet nogen resultater.

I den anden ende, JavaScript er ansvarlig for at lytte til brugerhændelser. Send asynkrone anmodninger (AJAX) til backend'en i søgefeltet, og vis de returnerede data på siden uden at browseren foretager en fuld opdatering. Dette kan gøres med native fetch, jQuery AJAX eller små reaktive biblioteker som Alpine.js.

Med denne grundlæggende mekanisme kan du bygge ud fra en Simpel autofuldførelse med få poster, op til en avanceret fuldtekstsøgemaskine med relevans, paginering og filtre, understøttet af biblioteker som Laravel Scout og eksterne søgemaskiner, der er optimeret til søgning.

Model, ruter og controller til en grundlæggende realtidssøgemaskine

Før du dykker ned i JavaScript, skal du sørge for, at Laravel-siden er velorganiseret: en Eloquent-model at søge på, rydde ruter og en dedikeret controller at administrere søgelogikken i realtid.

Det første skridt er at have en Eloquent-model, der repræsenterer den tabel, du skal søge i. Forestil dig en tabel over lande og en model kaldet Forældre Meget simpelt, uden tidsstempler og med mulighed for massetildeling:

Eksempel på en minimal Eloquent-model til søgninger:

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 her angivet, at modellen Pais er placeret i standard Laravel-navneområdetDen arver fra Model og giver dig mulighed for at tildele et hvilket som helst felt med create() ved at lade det beskyttede array være tomt. Ved at deaktivere tidsstempler med public $timestamps = false undgår du problemer, hvis tabellen ikke har kolonnerne created_at og updated_at.

Det næste trin er at definere de ruter, der håndterer både søgemaskinevisningen og AJAX-anmodningerneEn meget almindelig metode kombinerer en GET-rute til at vise visningen og en POST-rute designet til at modtage forespørgsler i realtid:

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

Rodruten returnerer en velkomstvisning, mens URL'en /search er reserveret til søgefunktionalitetControllerens index()-metode viser formularen og søgeinputtet, mens search()-metoden behandler asynkrone anmodninger sendt fra browseren.

I controlleren kan du implementere et meget praktisk mønster: Forbered et standardsvararray i tilfælde af fejl og kun overskrive den, når det faktisk er en gyldig AJAX-anmodning, og forespørgslen udføres uden problemer.

Controlleren har muligvis 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 tidspunkt har du allerede Den komplette backend-cyklus: indgående AJAX-anmodning, kontrol af at det er AJAX, forespørgsler med where like og begrænsning af resultater til et rimeligt antal ved hjælp af take(10) for at undgå overbelastning af databasen. Svaret sendes altid i JSON, hvilket forenkler frontend'ens arbejde betydeligt.

Blade View og JavaScript-hentning til reaktiv søgning

Med modellen, ruterne og controlleren klar, er det tid til at bygge den synlige del: en formular med et søgefelt og en blok til at vise resultaterne, plus det JavaScript, der er ansvarlig for at foretage anmodninger i baggrunden.

Blade-visningen kan være meget enkel, afhængigt af CSRF-token som Laravel injicerer for at validere POST-anmodninger og i et søgeinput, der er praktisk at bruge:

<!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 eksempel er scriptet Lyt efter keyup-hændelsen på søgeinputtetHvert tastetryk udløser en hentningsanmodning til /search-stien. Feltets aktuelle tekst sendes i JSON-format, og nøgleoverskrifter som X-Requested-With er inkluderet for at angive, at det er AJAX, sammen med CSRF-tokenet for at omgå Laravels native beskyttelse.

Når svaret ankommer, transformeres det til JSON og genereres dynamisk. en lille HTML-liste med resultaterneeller en besked som "Ingen resultater fundet", når forespørgslen ikke returnerer data. Alt dette uden at genindlæse siden, på en naturlig måde for brugeren.

Dette mønster kan yderligere forfines med små UX-detaljer, såsom at tilføje en forsinkelse (debounce) mellem tastetryk, vise en indlæser eller håndtere netværksfejl for at forhindre, at brugerfladen ser fastfrossen ud, når noget fejler.

Livesøgning med Laravel og AJAX ved hjælp af jQuery

Selvom apportering har vundet meget terræn i disse dage, jQuery AJAX er fortsat meget populært i ældre projekter eller i teams, der allerede har det implementeret. Ideen er præcis den samme: indfang, hvad brugeren skriver, foretag en asynkron anmodning, og opdater DOM'en.

En typisk arbejdsgang med jQuery i Laravel til livesøgning inkluderer normalt disse grundlæggende trin: Definer en specifik rute, opret en dedikeret controller, byg Blade-visningen med søgeinputtet Og til sidst, tilføj den jQuery-kode, der udløser AJAX, når den skrives.

Processen fungerer sådan her: når brugeren begynder at skrive, jQuery sender en forespørgsel til serveren med søgestrengen. Laravel filtrerer informationen i databasen, returnerer en JSON med de matchende resultater, og jQuery opdaterer en HTML-container på siden for at afspejle matchene, alt sammen i løbet af få millisekunder.

Fordelen ved at bruge jQuery er, at Det opsummerer stort set syntaksen i AJAX Og det er meget ligetil at læse, hvis du allerede har biblioteket i dit projekt. Du tilføjer dog en ekstra afhængighed, som måske ikke er nødvendig, hvis du kan arbejde med moderne JavaScript og native fetch.

Realtidsfiltrering og søgning på frontend med Alpine.js

Når de data, der skal vises, er relativt små (f.eks. mindre end 50 varer), er det ikke altid værd at sætte en backend op med komplekse søgninger. I disse tilfælde er en meget bekvem mulighed Filtrer direkte i browseren med Alpine.js, uden at foretage anmodninger til serveren, mens brugeren skriver.

Ideen er at forudberegne en søgestreng for hvert element (for eksempel navn, beskrivelse og kategori med små bogstaver), gemme den i en data-search-text-attribut og lade Alpine.js håndtere resten. vis eller skjul elementer i henhold til den skrevne tekst i et søgefelt.

Alpine.js-komponenten kan have en struktur, der ligner denne: 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 række af data bære en attribut data-search-text med teksten allerede forberedt med små bogstaverDerfor reduceres filteret til en includes()-funktion i JavaScript, hvilket er meget hurtigt 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>

Derudover kan du kun vise en tom tilstandsblok, når Der er ingen resultater for det aktuelle søgeord.inviterer brugeren til at ændre teksten eller rydde feltet med en knap, der blot nulstiller søgningen til en tom streng.

Denne tilgang har klare fordele: Der er ingen serveropkald under søgningen.Interaktionen er stort set øjeblikkelig, og logikken forbliver meget lokal og nem at debugge. Det er perfekt til hurtige selektorer, modaler til vareudvælgelse eller små kataloger, der er integreret i en Laravel-side.

Laravel Scout: Fuldtekstsøgning med specialiserede søgemotorer

Når tingene bliver alvorlige, og du har brug for det hurtige, relevante og skalerbare fuldtekstsøgningerDen naturlige vej i Laravel er Laravel Scout. Scout er et integrationslag, der giver dig mulighed for nemt at forbinde dine Eloquent-modeller med søgemaskiner som Algolia, Meilisearch, din egen database, in-memory-samlinger eller endda Elasticsearch via eksterne controllere.

For at komme i gang med Scout er det sædvanlige Opret et nyt Laravel-projekt eller genbrug et eksisterendeFor at starte det skal du bruge Docker (f.eks. med Laravel Sail) og derefter installere biblioteket med Composer. Når det er gjort, skal du udgive konfigurationsfilen scout.php og justere miljøvariablerne i henhold til den driver, du vil bruge.

En typisk arbejdsgang ville være at installere Scout med Composer, udgive dens konfiguration og Aktivér indekskøen med SCOUT_QUEUE=true I .env-filen skal du sørge for, at ressourcekrævende operationer behandles i baggrunden, hvilket forbedrer applikationens svartider. Derudover skal du sikre dig, at DB_HOST peger på den database, du bruger, hvilket er især vigtigt, hvis du bruger Docker-containere.

For at en model kan deltage i spejdersøgninger, er det nødvendigt at For eksplicit at markere det som søgbart ved at tilføje egenskaben SøgbartHvis du for eksempel har en togmodel, der repræsenterer en tabel over tog med et titelfelt, kan du definere den således:

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 tillader Tilpas indeksnavnet i søgemaskinenI stedet for at bruge standardnavnet, der er afledt af modellen, overtager Scout. Herfra håndterer Scout synkroniseringen af ​​oprettelses-, opdaterings- og sletningshandlingerne med det eksterne eller lokale indeks, afhængigt af den valgte driver.

Laravel Scout med Algolia: Lynhurtig SaaS-søgning

Algolia er en SaaS-tjeneste med fokus på at tilbyde meget hurtige og relevante søgninger på tværs af store datamængderDen har et webpanel til administration af indekser, relevansregler, synonymer osv., og integrerer rigtig godt med Laravel gennem Scout og den officielle PHP-klient.

For at bruge Algolia med Scout skal du installere dens PHP-klient med Composer, registrere dine legitimationsoplysninger i .env-filen (applikations-ID og administrator-API-nøgle) og sæt SCOUT_DRIVER=algolia at fortælle Scout at bruge denne motor. Fra Algolia-panelet kan du hente både program-ID'et og administratornøglen.

Når miljøet er konfigureret, kan du bruge metoder som f.eks. Train::search('text')->pagerate(6) direkte ind i dine controllere for at udføre søgninger på de indekserede felter og modtage resultater i pagineret Eloquent-format, der er klar til at blive sendt til en Blade-visning.

E.g.Du kunne have en controller indeks der viser alle tog eller udfører en søgning, hvis en titlesearch-parameter modtages, og en create-metode til at indsætte nye tog i indekset:

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 visning kan du kombinere en formular til registrering af nye tog og en anden GET-formular med et titlesearch-felt, der udløser søgningen ved afsendelse. Så skal du bare iterere gennem samlingen af ​​tog og vise deres felter i en tabel, hvor du udnytter de pagineringslinks, der genereres af Laravel.

Scout med Meilisearch, database og samlinger

Hvis du foretrækker at undgå eksterne tjenester, Meilisearch er en open source-søgemaskine som du kan implementere lokalt eller på din infrastruktur. Scout integrerer med Meilisearch på en meget lignende måde som Algolia, blot ved at ændre driveren og tilføje variablerne MEILISEARCH_HOST og MEILISEARCH_KEY til .env-filen.

For at bruge det skal du installere Meilisearch PHP-klienten, justere SCOUT_DRIVER=meilisearch og peg MEILISEARCH_HOST til instansens URL (for eksempel http://127.0.0.1:7700). Hvis du allerede havde tidligere poster, kan du indeksere dem med kommandoen php artisan scout:import "App\Models\Train", så motoren har dem tilgængelige.

I mindre eller moderate anvendelser kan du også vælge Scout-chaufførdatabaseDette udnytter fuldtekstindekser og LIKE-kommandoer på din MySQL- eller PostgreSQL-database. I dette tilfælde behøver du ikke en ekstern tjeneste; du skal blot indstille SCOUT_DRIVER=database, så Scout bruger selve databasen som søgemaskine.

En anden interessant mulighed er driversamling, som arbejder på Eloquent-samlinger i hukommelsenDenne motor filtrerer resultater ved hjælp af WHERE-klausuler og samlingsfiltrering og er kompatibel med enhver database, der understøttes af Laravel. Du kan aktivere den med `SCOUT_DRIVER=samling` eller ved at justere Scout-konfigurationsfilen for mere specifikke indstillinger.

Integration med Elasticsearch ved hjælp af Explorer

Hvis dine søgebehov involverer arbejde med enorme datamængder og realtidsanalyseElasticsearch er en klassiker. I Laravel-økosystemet er en moderne måde at integrere det med Scout på at bruge Explorer-controlleren, der fungerer som en bro mellem dine modeller og en Elasticsearch-klynge.

Til dette formål bruges Docker normalt sammen med en omfattende docker-compose-fil, der udover de typiske tjenester (Laravel, MySQL, Redis, Meilisearch osv.) Elasticsearch- og Kibana-containereDerefter installerer du jeroen-g/explorer-pakken via Composer og publicerer dens konfigurationsfil for at angive, hvilke modeller der skal indekseres.

I filen config/explorer.php kan du registrere dine modeller under indexes-nøglen, for eksempel ved at tilføje App\Modeller\Træn::klasseDerudover ændrer du Scout-driveren til elastic i .env-filen med SCOUT_DRIVER=elastic, så alt peger på Elasticsearch.

Inden for Train-modellen skal Explored-grænsefladen implementeres, og metoden tilskrives. kortlægges somsom definerer kortet over felter, der sendes til indekset. 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 nu af, Du kan starte søgninger på Elasticsearch ved hjælp af den samme Scout-grænseflade., der drager fordel af meget lave svartider og den fulde forespørgselskraft fra denne motor, men uden at forlade Laravel-økosystemet.

Med alle disse tilgange – fra grundlæggende autofuldførelse med fetch eller jQuery, til frontend-filtrering med Alpine.js, til fuldtekstsøgninger med Laravel Scout og forskellige drivere – Laravel giver dig et stort udvalg af muligheder for at implementere søgninger i realtid skræddersyet til størrelsen af ​​dit projekt, den ydeevne, du har brug for, og den infrastruktur, du er villig til at vedligeholde.