Vollständiger Leitfaden zur Echtzeitsuche in Laravel

Informatec Digital » Ressourcen » Vollständiger Leitfaden zur Echtzeitsuche in Laravel

Wenn Sie mit Laravel arbeiten und einen benötigen Echtzeit-Suchmaschine, die sofort reagiertBei der Vielzahl an möglichen Ansätzen – AJAX mit fetch, jQuery, Alpine.js, Scout mit Algolia oder Meilisearch, Frontend-Filterung usw. – kann man leicht den Überblick verlieren. Die gute Nachricht ist: Das Laravel-Ökosystem bietet bereits praktisch alles, was Sie für eine reibungslose und schnelle Suche benötigen, ohne dabei zu scheitern.

In diesem Artikel erfahren Sie, wie man es zusammenbaut. verschiedene Arten der Echtzeitsuche in LaravelVon der klassischen AJAX-Autovervollständigung bis hin zu Volltextsuchen mit Laravel Scout und Suchmaschinen wie Algolia, Meilisearch, der Datenbank selbst oder sogar Elasticsearch. Sie finden außerdem schlanke Alternativen mit Alpine.js, um Daten direkt im Browser zu filtern, wenn das Datenvolumen gering ist.

Was ist eine Echtzeitsuche in Laravel und wie funktioniert sie im Prinzip?

Die Idee hinter einer Echtzeitsuche ist, während der Benutzer in ein Textfeld tipptEs wird eine Abfrage ausgelöst und die Ergebnisse werden aktualisiert, ohne die Seite neu zu laden. Technisch gesehen sind dafür drei Schlüsselkomponenten erforderlich: das Laravel-Backend, das JavaScript des Browsers und der Datenaustausch im JSON-Format.

Einerseits Laravel fungiert als Serverschicht Es ist zuständig für den Empfang von Anfragen, die Interpretation der Suchparameter (des eingegebenen Textes), die Abfrage der Datenbank und die Rückgabe einer strukturierten Antwort, üblicherweise im JSON-Format. Diese Antwort kann Erfolg, einen Fehler oder das Fehlen von Ergebnissen signalisieren.

Am anderen Ende, JavaScript ist für das Abhören von Benutzerereignissen zuständig. Beim Suchfeld werden asynchrone Anfragen (AJAX) an den Backend-Server gesendet und die zurückgegebenen Daten auf der Seite angezeigt, ohne dass der Browser die Seite vollständig neu laden muss. Dies kann mit nativem Fetch, jQuery AJAX oder kleinen reaktiven Bibliotheken wie Alpine.js realisiert werden.

Mit diesem Grundmechanismus können Sie aus einem Einfache Autovervollständigung mit wenigen Datensätzenbis hin zu einer hochentwickelten Volltextsuchmaschine mit Relevanz-, Paginierungs- und Filterfunktionen, unterstützt durch Bibliotheken wie Laravel Scout und externe Suchmaschinen, die für die Suche optimiert sind.

Modell, Routen und Controller für eine einfache Echtzeit-Suchmaschine

Bevor Sie sich mit JavaScript beschäftigen, müssen Sie sicherstellen, dass die Laravel-Seite gut organisiert ist: ein Eloquent-Modell zum Durchsuchen, klare Routen und ein dedizierter Controller um die Suchlogik in Echtzeit zu verwalten.

Der erste Schritt besteht darin, ein Eloquent-Modell zu erstellen, das die Tabelle repräsentiert, in der Sie suchen möchten. Stellen Sie sich eine Tabelle mit Ländern und ein Modell namens „Länder“ vor. Eltern Ganz einfach, ohne Zeitstempel und mit der Möglichkeit zur Massenzuweisung:

Beispiel eines minimalen Eloquent-Modells für Suchvorgänge:

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

Hier wird darauf hingewiesen, dass das Modell Pais befindet sich im Standard-Namensraum von Laravel.Es erbt von Model und ermöglicht es Ihnen, jedes Feld mit create() zuzuweisen, indem Sie das geschützte Array leer lassen. Durch Deaktivieren der Zeitstempel mit public $timestamps = false vermeiden Sie Probleme, falls die Tabelle die Spalten created_at und updated_at nicht enthält.

Der nächste Schritt besteht darin, zu definieren die Routen, die sowohl die Suchmaschinenanzeige als auch die AJAX-Anfragen verarbeiten.Ein sehr gängiges Schema kombiniert eine GET-Route zur Anzeige der Ansicht mit einer POST-Route, die für den Empfang von Echtzeitanfragen ausgelegt ist:

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

Die Root-Route gibt eine Willkommensansicht zurück, während die URL /search ist für die Suchfunktion reserviert.Die index()-Methode des Controllers zeigt das Formular und das Suchfeld an, während die search()-Methode asynchrone Anfragen des Browsers verarbeitet.

Im Controller lässt sich ein sehr praktisches Muster implementieren: Bereiten Sie ein Standardantwort-Array für den Fehlerfall vor. und wird nur dann überschrieben, wenn es sich tatsächlich um eine gültige AJAX-Anfrage handelt und die Abfrage problemlos ausgeführt wird.

Der Controller könnte einen haben ähnliche Struktur diese:

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

An diesem Punkt haben Sie bereits Der komplette Backend-Zyklus: eingehende AJAX-Anfrage, Überprüfung, ob es sich um eine AJAX-Anfrage handelt, Abfrage mit `where like` und Einschränkung der Ergebnisse Um die Datenbank nicht zu überlasten, wird die Anzahl der Anfragen mit `take(10)` auf ein vernünftiges Maß begrenzt. Die Antwort wird stets im JSON-Format gesendet, was die Arbeit im Frontend erheblich vereinfacht.

Blade-Ansicht und JavaScript-Abruf für reaktive Suche

Nachdem Modell, Routen und Controller bereit sind, ist es nun an der Zeit, den sichtbaren Teil zu erstellen: ein Formular mit einem Suchfeld und einem Block zur Anzeige der Ergebnisse, zuzüglich des JavaScript-Codes, der für die Anfragen im Hintergrund zuständig ist.

Die Blade-Ansicht kann sehr einfach sein und basiert auf der CSRF-Token welche Laravel zur Validierung von POST-Anfragen und in einem benutzerfreundlichen Suchfeld einfügt:

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

In diesem Beispiel das Skript Achten Sie auf das Tastendruckereignis beim Sucheingabefeld.Jeder Tastendruck löst eine Anfrage an den Pfad `/search` aus. Der aktuelle Text des Suchfelds wird im JSON-Format gesendet, und wichtige Header wie `X-Requested-With` kennzeichnen die AJAX-Anfrage. Zusätzlich wird ein CSRF-Token gesendet, um den nativen Schutz von Laravel zu umgehen.

Wenn die Antwort eintrifft, wird sie in JSON umgewandelt und dynamisch generiert. eine kleine HTML-Liste mit den ErgebnissenOder eine Meldung wie „Keine Ergebnisse gefunden“, wenn die Abfrage keine Daten liefert. All dies ohne Neuladen der Seite, auf eine für den Nutzer intuitive Weise.

Dieses Muster kann durch kleine UX-Details weiter verfeinert werden, wie zum Beispiel durch das Hinzufügen von Verzögerung (Entprellung) Zwischen den Tastendrücken einen Ladeindikator anzeigen oder Netzwerkfehler behandeln, um zu verhindern, dass die Benutzeroberfläche eingefroren erscheint, wenn etwas schiefgeht.

Live-Suche mit Laravel und AJAX mithilfe von jQuery

Obwohl „fetch“ heutzutage stark an Bedeutung gewonnen hat. jQuery AJAX ist nach wie vor sehr beliebt. In bestehenden Projekten oder in Teams, die es bereits implementiert haben, ist das Prinzip genau dasselbe: Die Benutzereingaben werden erfasst, eine asynchrone Anfrage gesendet und das DOM aktualisiert.

Ein typischer Workflow mit jQuery in Laravel für die Live-Suche umfasst üblicherweise diese grundlegenden Schritte: Eine bestimmte Route definieren, einen dedizierten Controller erstellen, die Blade-Ansicht mit der Sucheingabe erstellen Und schließlich fügen Sie den jQuery-Code hinzu, der beim Eingeben des Textes einen AJAX-Aufruf auslöst.

Der Prozess funktioniert folgendermaßen: Wenn der Benutzer mit dem Tippen beginnt, jQuery sendet eine Anfrage an den Server. mit der Suchzeichenfolge. Laravel filtert die Informationen in der Datenbank, gibt ein JSON mit den passenden Ergebnissen zurück, und jQuery aktualisiert einen HTML-Container auf der Seite, um die Treffer widerzuspiegeln – alles in Millisekunden.

Der Vorteil der Verwendung von jQuery besteht darin, dass Es fasst im Wesentlichen die Syntax von AJAX zusammen. Und es ist sehr einfach zu lesen, wenn die Bibliothek bereits im Projekt vorhanden ist. Allerdings fügen Sie eine zusätzliche Abhängigkeit hinzu, die möglicherweise nicht notwendig ist, wenn Sie mit modernem JavaScript und nativem Fetch arbeiten können.

Echtzeitfilterung und -suche im Frontend mit Alpine.js

Wenn die anzuzeigenden Daten relativ klein sind (zum Beispiel, weniger als 50 ArtikelDaher lohnt es sich nicht immer, ein Backend mit komplexen Suchvorgängen einzurichten. In solchen Fällen ist eine sehr praktische Option: Mit Alpine.js direkt im Browser filtern, ohne während der Eingabe des Benutzers Anfragen an den Server zu senden.

Die Idee besteht darin, für jedes Element eine Suchzeichenfolge vorzuberechnen (zum Beispiel Name, Beschreibung und Kategorie in Kleinbuchstaben), diese in einem data-search-text-Attribut zu speichern und Alpine.js den Rest erledigen zu lassen. Elemente je nach geschriebenem Text ein- oder ausblenden in einem Suchfeld.

Die Alpine.js-Komponente kann eine ähnliche Struktur wie diese aufweisen: Filterelemente

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

In dieser Ansicht würde jede Karte oder Datenzeile ein Attribut enthalten. Datensuche-Text mit dem bereits in Kleinbuchstaben vorbereiteten TextDaher wird der Filter in JavaScript auf eine includes()-Funktion reduziert, was für kurze Listen sehr schnell ist:

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

Zusätzlich können Sie einen leeren Zustandsblock nur dann anzeigen, wenn Für den aktuellen Suchbegriff wurden keine Ergebnisse gefunden.Den Benutzer dazu einzuladen, den Text zu ändern oder das Feld mit einer Schaltfläche zu leeren, die die Suche einfach auf eine leere Zeichenkette zurücksetzt.

Dieser Ansatz hat klare Vorteile: Während der Suche erfolgen keine Serveraufrufe.Die Interaktion erfolgt nahezu verzögerungsfrei, und die Logik bleibt hochgradig lokal und leicht zu debuggen. Es eignet sich perfekt für Schnellauswahldialoge, Artikelauswahlfenster oder kleine Kataloge, die in eine Laravel-Seite eingebettet sind.

Laravel Scout: Volltextsuche mit spezialisierten Suchmaschinen

Wenn es ernst wird und Sie brauchen schnelle, relevante und skalierbare VolltextsucheDer naheliegende Weg in Laravel ist Laravel Scout. Scout ist eine Integrationsschicht, die es Ihnen ermöglicht, Ihre Eloquent-Modelle einfach mit Suchmaschinen wie Algolia, Meilisearch, Ihrer eigenen Datenbank, In-Memory-Sammlungen oder sogar Elasticsearch über externe Controller zu verbinden.

Um mit Scout zu beginnen, ist das Übliche Folgendes: Erstelle ein neues Laravel-Projekt oder verwende ein bestehendes wieder.Zum Starten verwenden Sie Docker (z. B. mit Laravel Sail) und installieren anschließend die Bibliothek mit Composer. Sobald dies abgeschlossen ist, veröffentlichen Sie die Konfigurationsdatei scout.php und passen die Umgebungsvariablen an den gewünschten Treiber an.

Ein typischer Arbeitsablauf wäre, Scout mit Composer zu installieren, seine Konfiguration zu veröffentlichen und Aktivieren Sie die Indexierungswarteschlange mit SCOUT_QUEUE=true Stellen Sie in der .env-Datei sicher, dass ressourcenintensive Operationen im Hintergrund ausgeführt werden, um die Antwortzeiten der Anwendung zu verbessern. Achten Sie außerdem darauf, dass DB_HOST auf die verwendete Datenbank verweist. Dies ist besonders wichtig bei der Verwendung von Docker-Containern.

Damit ein Model an Scout-Suchen teilnehmen kann, ist es notwendig, Um es explizit als durchsuchbar zu kennzeichnen, fügen Sie das Merkmal "Durchsuchbar" hinzu.Wenn Sie beispielsweise ein Zugmodell haben, das eine Tabelle von Zügen mit einem Titelfeld darstellt, könnten Sie es folgendermaßen definieren:

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

Die searchableAs-Methode erlaubt Den Indexnamen in der Suchmaschine anpassenAnstatt den vom Modell abgeleiteten Standardnamen zu verwenden, übernimmt Scout die Namensgebung. Ab diesem Zeitpunkt synchronisiert Scout die Erstellungs-, Aktualisierungs- und Löschvorgänge mit dem Remote- oder lokalen Index, abhängig vom gewählten Treiber.

Laravel Scout mit Algolia: Blitzschnelle SaaS-Suche

Algolia ist ein SaaS-Dienst mit Schwerpunkt auf um sehr schnelle und relevante Suchvorgänge in großen Datenmengen anzubietenEs verfügt über ein Webpanel zur Verwaltung von Indizes, Relevanzregeln, Synonymen usw. und lässt sich über Scout und den offiziellen PHP-Client sehr gut in Laravel integrieren.

Um Algolia mit Scout zu verwenden, müssen Sie den PHP-Client mit Composer installieren, Ihre Zugangsdaten in der .env-Datei registrieren (Anwendungs-ID und Admin-API-Schlüssel) und set SCOUT_DRIVER=algolia Um Scout anzuweisen, diese Engine zu verwenden, können Sie im Algolia-Panel sowohl die Anwendungs-ID als auch den Administratorschlüssel abrufen.

Sobald die Umgebung konfiguriert ist, können Sie Methoden wie die folgenden verwenden: Train::search('text')->paginate(6) direkt in Ihre Controller, um Suchvorgänge in den indizierten Feldern durchzuführen und Ergebnisse im paginierten Eloquent-Format zu erhalten, die dann an eine Blade-Ansicht übergeben werden können.

Z.B.Du könntest einen Controller haben. Index die alle Züge auflistet oder eine Suche durchführt, wenn ein titlesearch-Parameter empfangen wird, und eine create-Methode zum Einfügen neuer Züge in den Index:

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

In der entsprechenden Ansicht können Sie kombinieren ein Formular zur Registrierung neuer Züge und ein weiteres GET-Formular mit einem Titelsuchfeld, das die Suche beim Absenden auslöst. Anschließend müssen Sie nur noch die Sammlung der Züge durchlaufen und deren Felder in einer Tabelle anzeigen, wobei Sie die von Laravel generierten Paginierungslinks nutzen.

Scout mit Meilisearch, Datenbanken und Sammlungen

Wenn Sie externe Dienstleistungen vermeiden möchten, Meilisearch ist eine Open-Source-Suchmaschine. Scout lässt sich lokal oder auf Ihrer Infrastruktur bereitstellen. Die Integration von Scout mit Meilisearch erfolgt ähnlich wie bei Algolia, indem lediglich der Treiber geändert und die Variablen MEILISEARCH_HOST und MEILISEARCH_KEY zur .env-Datei hinzugefügt werden.

Um es zu verwenden, installieren Sie den Meilisearch PHP-Client und passen ihn an. SCOUT_DRIVER=meilisearch Setzen Sie MEILISEARCH_HOST auf die Instanz-URL (z. B. http://127.0.0.1:7700). Falls bereits Datensätze vorhanden sind, können Sie diese mit dem Befehl `php artisan scout:import "App\Models\Train"` indizieren, sodass sie der Engine zur Verfügung stehen.

Bei kleineren oder mittelgroßen Anwendungen können Sie auch die folgende Option wählen: Scout-FahrerdatenbankDies nutzt Volltextindizes und LIKE-Befehle Ihrer MySQL- oder PostgreSQL-Datenbank. In diesem Fall benötigen Sie keinen externen Dienst; setzen Sie einfach SCOUT_DRIVER=database, damit Scout die Datenbank selbst als Suchmaschine verwendet.

Eine weitere interessante Option ist die Treiber-Collection, die mit Eloquent-Collections im Speicher arbeitet.Diese Engine filtert Ergebnisse mithilfe von WHERE-Klauseln und Sammlungsfiltern und ist mit allen von Laravel unterstützten Datenbanken kompatibel. Sie können sie mit `SCOUT_DRIVER=collection` aktivieren oder die Scout-Konfigurationsdatei für spezifischere Einstellungen anpassen.

Integration mit Elasticsearch mithilfe von Explorer

Wenn Ihre Suchanforderungen Folgendes umfassen Arbeiten mit riesigen Datenmengen und EchtzeitanalyseElasticsearch ist ein Klassiker. Im Laravel-Ökosystem besteht eine moderne Möglichkeit, es mit Scout zu integrieren, darin, den Explorer-Controller zu verwenden, der als Brücke zwischen Ihren Modellen und einem Elasticsearch-Cluster fungiert.

Hierfür wird üblicherweise Docker verwendet, zusammen mit einer umfangreichen docker-compose-Datei, die neben den typischen Diensten (Laravel, MySQL, Redis, Meilisearch usw.) auch diese enthält. Elasticsearch- und Kibana-ContainerAnschließend installieren Sie das Paket jeroen-g/explorer über Composer und veröffentlichen dessen Konfigurationsdatei, um anzugeben, welche Modelle indexiert werden sollen.

In der Datei config/explorer.php können Sie Ihre Modelle unter dem Schlüssel „indexes“ registrieren, beispielsweise durch Hinzufügen von App\Models\Train::classZusätzlich ändern Sie den Scout-Treiber in der .env-Datei mit SCOUT_DRIVER=elastic auf elastic, sodass alles auf Elasticsearch verweist.

Innerhalb des Train-Modells muss die Explored-Schnittstelle implementiert und die Methode überschrieben werden. mappableAsDiese Definition legt die Zuordnung der Felder fest, die an den Index gesendet werden. Ein Minimalbeispiel wä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,
];
}
}

Von hier aus Sie können Suchvorgänge in Elasticsearch über dieselbe Scout-Oberfläche starten.Sie profitieren von sehr kurzen Antwortzeiten und der vollen Abfrageleistung dieser Engine, ohne jedoch das Laravel-Ökosystem zu verlassen.

Bei all diesen Ansätzen – von der einfachen Autovervollständigung mit fetch oder jQuery über die Frontend-Filterung mit Alpine.js bis hin zur Volltextsuche mit Laravel Scout und verschiedenen Treibern – Laravel bietet Ihnen eine riesige Auswahl an Optionen zur Implementierung von Echtzeitsuchen. Zugeschnitten auf die Größe Ihres Projekts, die von Ihnen benötigte Leistung und die Infrastruktur, die Sie bereit sind zu pflegen.