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 realtidssökmotor som svarar direkt är det 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 Laravels ekosystem redan tillhandahåller praktiskt taget allt du behöver för att bygga en smidig och snabb sökmotor utan att bli överväldigad.

I den här artikeln lär du dig hur du implementerar olika typer av realtidssökning i Laravel , från klassisk AJAX-autokomplettering till fulltextsökningar med hjälp av Laravel Scout och sökmotorer som Algolia, Meilisearch, själva databasen eller till och med Elasticsearch. Du kommer också att utforska lättviktsalternativ med Alpine.js för att filtrera data direkt i webbläsaren när du hanterar små datamängder.

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

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

Å ena sidan fungerar Laravel som serverlager som 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.

I andra änden hanterar JavaScript lyssnande efter användarhändelser i sökindata, sändning av asynkrona förfrågningar (AJAX) till backend och rendering av returnerad data på sidan utan att kräva en fullständig webbläsaruppdatering. Detta kan göras med native fetch, jQuery AJAX eller små reaktiva bibliotek som Alpine.js.

Med denna grundläggande mekanism kan du bygga allt från en enkel autokomplettering med ett fåtal poster till en avancerad fulltextsökmotor med relevans, paginering och filter, med hjälp av bibliotek som Laravel Scout och externa sökmotorer som är optimerade för sökningar.

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

Innan du fördjupar dig i JavaScript behöver du att Laravel-sidan är välorganiserad: en Eloquent-modell att söka på, tydliga rutter och en kontroller dedikerad till 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 med länder och en mycket enkel modell som heter Country , utan tidsstämplar och med tillåten masstilldelning:

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

Detta indikerar att Pais-modellen finns i standardnamnrymden Laravel , ärver från Model och tillåter tilldelning av valfritt fält 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 ska hantera både sökmotorvisningen och AJAX-förfrågningar . Ett 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']);

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

I kontrollenheten 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 faktiskt är en giltig AJAX-förfrågan och frågan körs utan problem.

Styrenheten skulle kunna ha en struktur som liknar denna:

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 hela backend-cykeln: inkommande AJAX-förfrågan, verifiering av att det verkligen är AJAX, fråga med `where like` och begränsning av antalet resultat till ett rimligt antal med `take(10)` för att undvika överbelastning av databasen. Svaret skickas alltid i JSON, vilket avsevärt förenklar frontend-arbetet.

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ågningarna i bakgrunden.

Blade-vyn kan vara mycket enkel och förlita sig på CSRF-tokenet som Laravel injicerar för att validera POST-förfrågningar och på en sökindata 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 lyssnar skriptet efter keyup-händelsen på sökindata , så varje 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 en liten HTML-lista med resultaten genereras dynamiskt , eller så visas ett meddelande som "Inga resultat hittades" om frågan inte returnerar några data. Allt detta sker utan att sidan 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 debounce 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 fetch har fått ett betydande genomslag, är jQuery AJAX fortfarande mycket populärt i äldre projekt eller team som redan har det integrerat. 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 en livesökning inkluderar vanligtvis dessa grundläggande steg: definiera en specifik rutt, skapa en dedikerad kontroller, bygga Blade-vyn med sökindata och slutligen lägga till jQuery-koden som utlöser AJAX när den skrivs.

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

Fördelen med att använda jQuery är att det förenklar AJAX-syntaxen avsevärt och är väldigt enkelt att läsa om du redan har biblioteket i ditt projekt. Det introducerar dock ett ytterligare beroende som kanske inte är nödvändigt om du kan arbeta med modern JavaScript och native fetch-funktionalitet.

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

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

Tanken är att i förväg beräkna en söksträng för varje objekt (t.ex. namn, beskrivning och kategori med gemener), spara den i ett data-search-text-attribut och låta Alpine.js hantera visning eller döljning av objekt baserat på texten som anges i ett sökfält.

Alpine.js-komponenten kan ha en struktur som liknar denna: 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;
},
}

I vyn skulle varje kort eller rad med data ha ett data-search-text-attribut där texten redan är förberedd i gemener , så filtret reduceras till ett includes() i JavaScript, 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 visa ett tomt statusblock endast när det inte finns några resultat för den aktuella söktermen , och uppmana 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 är 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 snabb, relevant och skalbar fulltextsökning är den naturliga vägen i Laravel Laravel Scout. Scout är ett integrationslager som låter dig enkelt ansluta dina Eloquent-modeller till sökmotorer som Algolia, Meilisearch, din databas, minnesbaserade samlingar eller till och med Elasticsearch via externa kontroller.

För att komma igång med Scout är det vanliga tillvägagångssättet att skapa ett nytt Laravel-projekt eller återanvända ett befintligt , starta det med Docker (till exempel med Laravel Sail) och sedan installera biblioteket med Composer. När det är klart publicerar du konfigurationsfilen scout.php och justerar 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 så att resurskrävande operationer bearbetas i bakgrunden, vilket förbättrar applikationernas svarstider. Dessutom bör 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 Scout-sökningar måste den uttryckligen markeras som sökbar genom att lägga till egenskapen `Sökbar` . Om du till exempel har en `Tåg`-modell som representerar en tabell över tåg med ett `titel`-fä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` låter dig anpassa indexnamnet i sökmotorn istället för att använda standardnamnet som härrör från modellen. Därifrån hanterar Scout synkronisering 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 som fokuserar på att tillhandahålla mycket snabba och relevanta sökningar över stora datamängder . Den har en webbpanel för att hantera index, relevansregler, synonymer med mera, och integreras sömlöst med Laravel via 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 konfigurera SCOUT_DRIVER=algolia för att ange att Scout ska använda den här motorn. Du kan hämta både applikations-ID och administratörsnyckel från Algolias instrumentpanel.

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

Till exempel kan du ha en indexkontroller som listar alla tåg eller utför en sökning om en titlesearch-parameter skickas, 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 att lägga till nya tåg och ett annat GET-formulär med ett sökfält för titel som utlöser sökningen vid inlämning. Sedan itererar du helt enkelt igenom samlingen av tåg och visar 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 är Meilisearch 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, installera Meilisearch PHP-klienten, sätt SCOUT_DRIVER=meilisearch och peka MEILISEARCH_HOST till instansens URL (till exempel http://127.0.0.1:7700). Om du redan har poster kan du indexera dem med kommandot php artisan scout:import "App\Models\Train" så att sökmotorn har dem tillgängliga.

För mindre eller medelstora applikationer kan du också välja Scouts databasdrivrutin , som utnyttjar fulltextindex och LIKE-satser 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 samlingsdrivrutinen, som fungerar med Eloquent-samlingar i minnet . Denna motor filtrerar resultat med hjälp av `where`- och samlingsfiltreringsmetoder, och den är kompatibel med alla databaser som stöds av Laravel. Du kan aktivera den med `SCOUT_DRIVER=collection` eller genom att justera Scout-konfigurationsfilen om du vill ha något mer specifikt.

Integration med Elasticsearch med hjälp av Explorer

Om dina sökbehov innebär att arbeta med enorma datamängder och realtidsanalys är Elasticsearch 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.

Detta innebär vanligtvis att arbeta med Docker och en omfattande docker-compose-fil som startas, utöver de vanliga tjänsterna (Laravel, MySQL, Redis, Meilisearch, etc.), Elasticsearch och Kibana-containrar . Sedan installerar du jeroen-g/explorer-paketet via Composer och publicerar dess konfigurationsfil för att ange 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\Models\Train::class . Dessutom ändrar du drivrutinen från Scout till Elasticsearch i .env-filen med SCOUT_DRIVER=elastic så att allt pekar mot Elasticsearch.

Inom Train-modellen behöver du implementera Explored-gränssnittet och åsidosätta mappableAs -metoden , som definierar kartan över fält som ska 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,
];
}
}

Härifrån kan du starta sökningar på Elasticsearch med samma Scout-gränssnitt , vilket ger dig mycket korta svarstider och den här sökmotorns fulla kraft, 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 – ger Laravel dig ett stort utbud av alternativ för att implementera realtidssökningar skräddarsydda efter projektets storlek, den prestanda du behöver och den infrastruktur du är villig att underhålla.