Komplett guide till realtidssökning i Laravel

Informatec Digital » Resurser » Komplett guide till realtidssökning i Laravel

När du börjar arbeta med Laravel och behöver en sökmotor i realtid som svarar direktDet är lätt att gå vilse bland tusen möjliga tillvägagångssätt: AJAX med fetch, jQuery, Alpine.js, Scout med Algolia eller Meilisearch, frontend-filtrering, etc. Den goda nyheten är att Laravel-ekosystemet redan tillhandahåller praktiskt taget allt du behöver för att skapa en smidig och snabb sökning utan att dö i försöket.

I den här artikeln får du se hur man monterar olika typer av realtidssökning i LaravelFrån klassisk AJAX-autokomplettering till fulltextsökningar med Laravel Scout och sökmotorer som Algolia, Meilisearch, själva databasen eller till och med Elasticsearch. Du hittar även lättviktsalternativ med Alpine.js för att filtrera data direkt i webbläsaren när datavolymen är liten.

Vad är en realtidssökning i Laravel och hur fungerar grunderna?

Tanken bakom en realtidssökning är att, när användaren skriver i ett textfältEn fråga utlöses och resultaten uppdateras utan att sidan behöver laddas om. Tekniskt sett involverar detta tre nyckelkomponenter: Laravel-backend, webbläsarens JavaScript och utbyte av data i JSON-format.

Å ena sidan, Laravel fungerar som serverlagret Den ansvarar för att ta emot förfrågningar, tolka sökparametrar (den inmatade texten), fråga databasen och returnera ett strukturerat svar, vanligtvis i JSON-format. Detta svar kan indikera framgång, fel eller att inga resultat hittades.

På andra änden, JavaScript ansvarar för att lyssna på användarhändelser. Skicka asynkrona förfrågningar (AJAX) till backend-systemet i sökinmatningen och visa den returnerade datan på sidan utan att webbläsaren behöver uppdatera fullständigt. Detta kan göras med native fetch, jQuery AJAX eller små reaktiva bibliotek som Alpine.js.

Med denna grundläggande mekanism kan du bygga från en Enkel autokomplettering med få poster, upp till en avancerad fulltextsökmotor med relevans, paginering och filter, som stöds av bibliotek som Laravel Scout och externa sökmotorer som är optimerade för sökning.

Modell, rutter och kontroller för en grundläggande realtidssökmotor

Innan du fördjupar dig i JavaScript måste du se till att Laravel-sidan är välorganiserad: en vältalig modell att söka på, tydliga rutter och en dedikerad kontrollenhet för att hantera söklogiken i realtid.

Det första steget är att ha en Eloquent-modell som representerar tabellen där du ska söka. Föreställ dig en tabell över länder och en modell som heter Land Mycket enkelt, utan tidsstämplar och med tillåten bulktilldelning:

Exempel på en minimal Eloquent-modell för sökningar:

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 anges här att modellen Pais finns i standardnamnrymden LaravelDen ärver från Model och låter dig tilldela vilket fält som helst med create() genom att lämna den skyddade arrayen tom. Genom att inaktivera tidsstämplar med public $timestamps = false undviker du problem om tabellen inte har kolumnerna created_at och updated_at.

Nästa steg är att definiera de rutter som hanterar både sökmotorvisningen och AJAX-förfrågningarnaEtt mycket vanligt schema kombinerar en GET-rutt för att visa vyn och en POST-rutt utformad för att ta emot frågor 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']);

Rotrutten returnerar en välkomstvy, medan URL:en /search är reserverat för sökfunktionerKontrollerns index()-metod visar formuläret och sökindata, medan search()-metoden bearbetar asynkrona förfrågningar som skickas från webbläsaren.

I regulatorn kan du implementera ett mycket praktiskt mönster: Förbered en standardsvarsmatris i händelse av fel och skriv bara över den när det verkligen är en giltig AJAX-begäran och frågan körs utan problem.

Styrenheten kan ha en liknande struktur detta:

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

Vid det här laget har du redan hela backend-cykeln: inkommande AJAX-förfrågan, kontroll av att det är AJAX, fråga med where like och begränsa resultaten till ett rimligt antal med hjälp av take(10) för att undvika överbelastning av databasen. Svaret skickas alltid i JSON, vilket avsevärt förenklar gränssnittets arbete.

Blade view och JavaScript-hämtning för reaktiv sökning

Med modellen, rutterna och kontrollenheten redo är det dags att bygga den synliga delen: ett formulär med ett sökfält och ett block för att visa resultaten, plus JavaScript-koden som ansvarar för att göra förfrågningar i bakgrunden.

Bladvyn kan vara mycket enkel och förlita sig på CSRF-token som Laravel injicerar för att validera POST-förfrågningar och i en sökinmatning som är bekväm att använda:

<!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 det här exemplet är skriptet Lyssna efter keyup-händelsen på sökinmatningenVarje tangenttryckning utlöser en hämtningsförfrågan till /search-sökvägen. Den aktuella texten i fältet skickas i JSON-format, och nyckelrubriker som X-Requested-With inkluderas för att indikera att det är AJAX, tillsammans med CSRF-token för att kringgå Laravels inbyggda skydd.

När svaret anländer omvandlas det till JSON och genereras dynamiskt. en liten HTML-lista med resultateneller ett meddelande som ”Inga resultat hittades” när frågan inte returnerar några data. Allt detta utan att sidan behöver laddas om, på ett naturligt sätt för användaren.

Detta mönster kan förfinas ytterligare med små UX-detaljer, som att lägga till en fördröjning (avstudsning) mellan tangenttryckningar, visa en laddare eller hantera nätverksfel för att förhindra att gränssnittet verkar fryst när något misslyckas.

Livesökning med Laravel och AJAX med hjälp av jQuery

Även om apport har vunnit mycket mark nuförtiden, jQuery AJAX är fortfarande mycket populärt i äldre projekt eller i team som redan har det implementerat. Idén är exakt densamma: registrera vad användaren skriver, göra en asynkron förfrågan och uppdatera DOM:en.

Ett typiskt arbetsflöde med jQuery i Laravel för livesökning inkluderar vanligtvis dessa grundläggande steg: definiera en specifik rutt, skapa en dedikerad kontroller, bygga bladvyn med sökindata Och slutligen, lägg till jQuery-koden som utlöser AJAX när den skrivs.

Processen fungerar så här: när användaren börjar skriva, jQuery skickar en fråga till servern med söksträngen. Laravel filtrerar informationen i databasen, returnerar en JSON med matchande resultat och jQuery uppdaterar en HTML-behållare på sidan för att återspegla matchningarna, allt på några millisekunder.

Fördelen med att använda jQuery är att Det sammanfattar i stort sett syntaxen för AJAX Och det är väldigt enkelt att läsa om du redan har biblioteket i ditt projekt. Du lägger dock till ett extra beroende som kanske inte är nödvändigt om du kan arbeta med modern JavaScript och native fetch.

Realtidsfiltrering och sökning på frontend med Alpine.js

När den information som ska visas är relativt liten (till exempel färre än 50 XNUMX artiklar), är det inte alltid värt att sätta upp en backend med komplexa sökningar. I sådana fall är ett mycket bekvämt alternativ Filtrera direkt i webbläsaren med Alpine.js, utan att göra förfrågningar till servern medan användaren skriver.

Tanken är att förberäkna en söksträng för varje element (till exempel namn, beskrivning och kategori med gemener), lagra den i ett data-search-text-attribut och låta Alpine.js hantera resten. visa eller dölj element enligt den skrivna texten i ett sökfält.

Alpine.js-komponenten kan ha en struktur som liknar denna: filterartiklar

{
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 vyn skulle varje kort eller rad med data bära ett attribut data-search-text med texten redan förberedd i gemenerDärför reduceras filtret till en includes()-funktion i JavaScript, vilket är mycket snabbt för korta listor:

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

Dessutom kan du bara visa ett tomt tillståndsblock när Det finns inga resultat för den aktuella söktermen.inbjuder användaren att ändra texten eller rensa fältet med en knapp som helt enkelt återställer sökningen till en tom sträng.

Denna metod har tydliga fördelar: Det sker inga serveranrop under sökningen.Interaktionen sker praktiskt taget omedelbar, och logiken förblir mycket lokal och enkel att felsöka. Den är perfekt för snabbväljare, modaler för objektval eller små kataloger inbäddade i en Laravel-sida.

Laravel Scout: Fulltextsökning med specialiserade sökmotorer

När det blir allvarligt och du behöver snabba, relevanta och skalbara fulltextsökningarDen naturliga vägen i Laravel är Laravel Scout. Scout är ett integrationslager som låter dig enkelt ansluta dina Eloquent-modeller till sökmotorer som Algolia, Meilisearch, din egen databas, minnesbaserade samlingar eller till och med Elasticsearch via externa kontroller.

För att komma igång med Scout är det vanliga skapa ett nytt Laravel-projekt eller återanvänd ett befintligtFör att starta det, använd Docker (till exempel med Laravel Sail) och installera sedan biblioteket med Composer. När det är klart, publicera konfigurationsfilen scout.php och justera miljövariablerna enligt den drivrutin du vill använda.

Ett typiskt arbetsflöde skulle vara att installera Scout med Composer, publicera dess konfiguration och aktivera indexeringskön med SCOUT_QUEUE=true I .env-filen, se till att resurskrävande operationer bearbetas i bakgrunden, vilket förbättrar programmets svarstider. Dessutom måste du se till att DB_HOST pekar på den databas du använder, vilket är särskilt viktigt om du använder Docker-containrar.

För att en modell ska kunna delta i scoutsökningar är det nödvändigt att För att explicit markera den som sökbar genom att lägga till egenskapen SökbarOm du till exempel har en tågmodell som representerar en tabell över tåg med ett titelfält kan du definiera den så här:

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

Metoden searchableAs tillåter anpassa indexnamnet i sökmotornIstället för att använda standardnamnet som härrör från modellen tar Scout över. Härifrån hanterar Scout synkroniseringen av skapande, uppdatering och borttagning med fjärr- eller lokalindexet, beroende på vald drivrutin.

Laravel Scout med Algolia: Blixtsnabb SaaS-sökning

Algolia är en SaaS-tjänst fokuserad på att erbjuda mycket snabba och relevanta sökningar över stora datamängderDen har en webbpanel för att hantera index, relevansregler, synonymer etc., och integreras mycket bra med Laravel genom Scout och den officiella PHP-klienten.

För att använda Algolia med Scout måste du installera dess PHP-klient med Composer, registrera dina inloggningsuppgifter i .env-filen (applikations-ID och administratörs-API-nyckel) och sätt SCOUT_DRIVER=algolia för att be Scout att använda den här motorn. Från Algolia-panelen kan du hämta både program-ID:t och administratörsnyckeln.

När miljön är konfigurerad kan du använda metoder som Train::search('text')->pagerate(6) direkt i dina styrenheter för att utföra sökningar i de indexerade fälten och ta emot resultat i paginerat Eloquent-format, redo att skickas till en Blade-vy.

T.ex.Du kan ha en kontroller index som listar alla tåg eller utför en sökning om en titlesearch-parameter tas emot, och en create-metod för att infoga nya tåg i indexet:

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 motsvarande vy kan du kombinera ett formulär för registrering av nya tåg och ett annat GET-formulär med ett titlesearch-fält som utlöser sökningen vid inskickning. Sedan behöver du bara iterera igenom samlingen av tåg och visa deras fält i en tabell, med hjälp av pagineringslänkarna som genereras av Laravel.

Sök med Meilisearch, databas och samlingar

Om du föredrar att undvika externa tjänster, Meilisearch är en sökmotor med öppen källkod som du kan driftsätta lokalt eller på din infrastruktur. Scout integreras med Meilisearch på ett mycket liknande sätt som Algolia, helt enkelt genom att ändra drivrutinen och lägga till variablerna MEILISEARCH_HOST och MEILISEARCH_KEY i .env-filen.

För att använda den installerar du Meilisearch PHP-klienten, justerar SCOUT_DRIVER=meilisearch och peka MEILISEARCH_HOST till instansens URL (till exempel http://127.0.0.1:7700). Om du redan hade tidigare poster kan du indexera dem med kommandot php artisan scout:import "App\Models\Train" så att motorn har dem tillgängliga.

I mindre eller medelstora tillämpningar kan du också välja Scout-förardatabasDetta utnyttjar fulltextindex och LIKE-kommandon i din MySQL- eller PostgreSQL-databas. I det här fallet behöver du ingen extern tjänst; ställ helt enkelt in SCOUT_DRIVER=database för att Scout ska använda själva databasen som sökmotor.

Ett annat intressant alternativ är drivrutinssamling, som arbetar med Eloquent-samlingar i minnetDen här motorn filtrerar resultat med hjälp av WHERE-klausuler och samlingsfiltrering, och är kompatibel med alla databaser som stöds av Laravel. Du kan aktivera den med `SCOUT_DRIVER=collection` eller genom att justera Scout-konfigurationsfilen för mer specifika inställningar.

Integration med Elasticsearch med hjälp av Explorer

Om dina sökbehov innefattar arbetar med enorma datamängder och realtidsanalyserElasticsearch är en klassiker. I Laravel-ekosystemet är ett modernt sätt att integrera det med Scout att använda Explorer-kontrollern, som fungerar som en brygga mellan dina modeller och ett Elasticsearch-kluster.

För att göra detta används vanligtvis Docker, tillsammans med en omfattande docker-compose-fil som, utöver de typiska tjänsterna (Laravel, MySQL, Redis, Meilisearch, etc.), Elasticsearch- och Kibana-containrarSedan installerar du jeroen-g/explorer-paketet via Composer och publicerar dess konfigurationsfil för att indikera vilka modeller som ska indexeras.

I filen config/explorer.php kan du registrera dina modeller under nyckeln indexes, till exempel genom att lägga till App\Modeller\Träna::klassDessutom ändrar du Scout-drivrutinen till elastic i .env-filen med SCOUT_DRIVER=elastic så att allt pekar på Elasticsearch.

Inom Train-modellen måste det utforskade gränssnittet implementeras och metoden åsidosättas. mappableAsvilket definierar kartan över fält som skickas till indexet. Ett minimalt exempel skulle vara:

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

Från och med nu, Du kan starta sökningar på Elasticsearch med samma Scout-gränssnitt., vilket drar nytta av mycket låga svarstider och den här motorns fulla frågekraft, men utan att lämna Laravel-ekosystemet.

Med alla dessa metoder – från grundläggande autokomplettering med fetch eller jQuery, till frontend-filtrering med Alpine.js, till fulltextsökningar med Laravel Scout och olika drivrutiner – Laravel ger dig ett enormt utbud av alternativ för att implementera sökningar i realtid skräddarsydda efter projektets storlek, den prestanda du behöver och den infrastruktur du är villig att underhålla.