Kompletní průvodce vyhledáváním v reálném čase v Laravelu

Informatec Digital » Zdroje » Kompletní průvodce vyhledáváním v reálném čase v Laravelu

Když začínáte pracovat s Laravelem a potřebujete vyhledávač v reálném čase, který reaguje okamžitěJe snadné se ztratit mezi tisíci možnými přístupy: AJAX s fetch, jQuery, Alpine.js, Scout s Algolií nebo Meilisearch, filtrování na frontendu atd. Dobrou zprávou je, že ekosystém Laravelu již poskytuje prakticky vše, co potřebujete k nastavení plynulého a rychlého vyhledávání, aniž byste při pokusu zemřeli.

V tomto článku se dozvíte, jak sestavit různé typy vyhledávání v reálném čase v LaraveluOd klasického automatického doplňování AJAX až po fulltextové vyhledávání s Laravel Scout a vyhledávači jako Algolia, Meilisearch, samotnou databází nebo dokonce Elasticsearch. Uvidíte také odlehčené alternativy s Alpine.js pro filtrování dat přímo v prohlížeči, když je objem dat malý.

Co je vyhledávání v reálném čase v Laravelu a jak fungují základy?

Myšlenka vyhledávání v reálném čase spočívá v tom, že když uživatel píše do textového poleDotaz je spuštěn a výsledky jsou aktualizovány bez nutnosti opětovného načítání stránky. Technicky vzato se jedná o tři klíčové komponenty: backend Laravelu, JavaScript prohlížeče a výměnu dat ve formátu JSON.

Na jedné straně, Laravel funguje jako serverová vrstva Je zodpovědný za příjem požadavků, interpretaci vyhledávacích parametrů (zadaného textu), dotazování databáze a vrácení strukturované odpovědi, obvykle ve formátu JSON. Tato odpověď může indikovat úspěch, chybu nebo to, že nebyly nalezeny žádné výsledky.

Na druhém konci, JavaScript je zodpovědný za naslouchání uživatelským událostem. Na vstupu vyhledávání odesílejte asynchronní požadavky (AJAX) do backendu a zobrazujte vrácená data na stránce, aniž by prohlížeč prováděl úplnou aktualizaci. Toho lze dosáhnout pomocí nativního fetch, jQuery AJAX nebo malých reaktivních knihoven, jako je Alpine.js.

S tímto základním mechanismem můžete stavět z Jednoduché automatické doplňování s několika záznamy, až po pokročilý fulltextový vyhledávač s relevancí, stránkováním a filtry, podporovaný knihovnami jako Laravel Scout a externími vyhledávači optimalizovanými pro vyhledávání.

Model, trasy a kontrolér pro základní vyhledávač v reálném čase

Než se ponoříte do JavaScriptu, musíte se ujistit, že je stránka Laravelu dobře organizovaná: výmluvný model pro vyhledávání, jasné trasy a specializovaný ovladač spravovat logiku vyhledávání v reálném čase.

Prvním krokem je mít model Eloquent, který reprezentuje tabulku, ve které budete vyhledávat. Představte si tabulku zemí a model s názvem Země Velmi jednoduché, bez časových razítek a s povoleným hromadným přiřazením:

Příklad minimálního modelu Eloquent pro vyhledávání:

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

Zde je uvedeno, že model Pais se nachází ve standardním jmenném prostoru Laravelu.Dědí z Model a umožňuje přiřadit libovolné pole pomocí create() tak, že chráněné pole ponecháte prázdné. Zakázáním časových razítek pomocí public $timestamps = false se vyhnete problémům, pokud tabulka neobsahuje sloupce created_at a updated_at.

Dalším krokem je definovat trasy, které budou zpracovávat jak zobrazení vyhledávače, tak i AJAX požadavkyVelmi běžné schéma kombinuje trasu GET pro zobrazení pohledu a trasu POST určenou pro příjem dotazů v reálném čase:

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

Kořenová trasa vrací uvítací zobrazení, zatímco URL /search je vyhrazeno pro funkci vyhledáváníMetoda index() kontroleru zobrazuje formulář a vyhledávací vstup, zatímco metoda search() zpracovává asynchronní požadavky odeslané z prohlížeče.

V řadiči můžete implementovat velmi praktický vzorec: Připravte výchozí pole odpovědí pro případ chyby a přepsat jej pouze tehdy, když se skutečně jedná o platný AJAX požadavek a dotaz se provede bez problémů.

Ovladač může mít podobná struktura tento:

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

V tomto okamžiku už máte kompletní backendový cyklus: příchozí AJAX požadavek, kontrola, zda se jedná o AJAX požadavek, dotazování typu „where like“ a omezení výsledků na rozumné číslo pomocí take(10), aby se zabránilo přetížení databáze. Odpověď se vždy odesílá ve formátu JSON, což výrazně zjednodušuje práci frontendu.

Zobrazení Blade a načítání JavaScriptem pro reaktivní vyhledávání

S připraveným modelem, trasami a kontrolérem je čas vytvořit viditelnou část: formulář s vyhledávacím polem a blokem pro zobrazení výsledků, plus JavaScript zodpovědný za provádění požadavků na pozadí.

Pohled na čepel může být velmi jednoduchý a spoléhá se na Token CSRF který Laravel vkládá pro ověření POST požadavků a do vyhledávacího pole, které je pohodlné používat:

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

V tomto příkladu skript Poslouchejte událost keyup na vstupu pro vyhledáváníKaždý stisk klávesy spustí požadavek na načtení do cesty /search. Aktuální text pole je odeslán ve formátu JSON a jsou zahrnuty klíčové hlavičky, jako například X-Requested-With, které označují, že se jedná o AJAX, spolu s tokenem CSRF, který obejde nativní ochranu Laravelu.

Když dorazí odpověď, je transformována do JSON a dynamicky generována. malý HTML seznam s výsledkynebo zprávu typu „Nenalezeny žádné výsledky“, když dotaz nevrátí žádná data. To vše bez nutnosti opětovného načítání stránky, přirozeným způsobem pro uživatele.

Tento vzor lze dále vylepšit malými detaily UX, například přidáním zpoždění (debounce) mezi stisknutími kláves, zobrazit zavaděč nebo ošetřit síťové chyby, aby se zabránilo zamrznutí rozhraní v případě selhání.

Živé vyhledávání s Laravelem a AJAXem pomocí jQuery

Ačkoliv si aport v dnešní době získal hodně na popularitě, jQuery AJAX je stále velmi populární ve starších projektech nebo v týmech, které to již mají implementované. Myšlenka je úplně stejná: zachytit, co uživatel píše, provést asynchronní požadavek a aktualizovat DOM.

Typický pracovní postup s jQuery v Laravelu pro živé vyhledávání obvykle zahrnuje tyto základní kroky: definovat specifickou trasu, vytvořit vyhrazený kontroler, sestavit zobrazení Blade s vyhledávacím vstupem A nakonec přidejte kód jQuery, který spouští AJAX při psaní.

Proces funguje takto: když uživatel začne psát, jQuery odešle dotaz na server s hledaným řetězcem. Laravel filtruje informace v databázi, vrací JSON s odpovídajícími výsledky a jQuery aktualizuje HTML kontejner na stránce tak, aby odrážel shody, to vše během několika milisekund.

Výhodou použití jQuery je, že To v podstatě shrnuje syntaxi AJAXu. A je to velmi snadno čitelné, pokud již knihovnu ve svém projektu máte. Přidáváte však další závislost, která nemusí být nutná, pokud umíte pracovat s moderním JavaScriptem a nativním načítáním.

Filtrování a vyhledávání v reálném čase na frontendu s Alpine.js

Pokud je objem zobrazených dat relativně malý (například méně než 50 XNUMX položek), ne vždy se vyplatí nastavovat backend se složitým vyhledáváním. V takových případech je velmi pohodlnou možností Filtrujte přímo v prohlížeči pomocí Alpine.js, aniž by se během psaní uživatelem odesílaly požadavky na server.

Myšlenkou je předem vypočítat vyhledávací řetězec pro každý prvek (například název, popis a kategorii malými písmeny), uložit jej do atributu data-search-text a nechat Alpine.js, aby se postaral o zbytek. zobrazit nebo skrýt prvky podle psaného textu ve vyhledávacím poli.

Komponenta Alpine.js může mít strukturu podobnou této: filtrPoložky

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

V zobrazení by každá karta nebo řádek dat nesla atribut text-vyhledávání-dat s již připraveným textem malými písmenyFiltr je proto v JavaScriptu redukován na funkci includes(), která je pro krátké seznamy velmi rychlá:

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

Prázdný stavový blok můžete navíc zobrazit pouze tehdy, když Pro aktuální hledaný výraz nejsou k dispozici žádné výsledky.vyzývá uživatele k úpravě textu nebo vymazání pole pomocí tlačítka, které jednoduše resetuje vyhledávání na prázdný řetězec.

Tento přístup má jasné výhody: Během vyhledávání neprobíhají žádná volání serveru.Interakce je prakticky okamžitá a logika zůstává vysoce lokální a snadno laditelná. Je to ideální pro rychlé selektory, modální okna pro výběr položek nebo malé katalogy vložené do stránky Laravelu.

Laravel Scout: Fulltextové vyhledávání se specializovanými vyhledávači

Když se věci začnou kazit a vy potřebujete rychlé, relevantní a škálovatelné fulltextové vyhledáváníPřirozenou cestou v Laravelu je Laravel Scout. Scout je integrační vrstva, která vám umožňuje snadno propojit vaše modely Eloquent s vyhledávači jako Algolia, Meilisearch, vaší vlastní databází, kolekcemi v paměti nebo dokonce Elasticsearch prostřednictvím externích kontrolerů.

Pro začátek se Scoutem je obvyklé vytvořit nový projekt v Laravelu nebo znovu použít existujícíPro spuštění použijte Docker (například s Laravel Sail) a poté nainstalujte knihovnu pomocí Composeru. Jakmile to uděláte, publikujte konfigurační soubor scout.php a upravte proměnné prostředí podle ovladače, který chcete použít.

Typický pracovní postup by zahrnoval instalaci Scoutu s Composerem, publikování jeho konfigurace a aktivovat indexovací frontu s parametrem SCOUT_QUEUE=true V souboru .env zajistěte, aby se operace náročné na zdroje zpracovávaly na pozadí, což zkrátí dobu odezvy aplikací. Dále musíte zajistit, aby DB_HOST odkazoval na databázi, kterou používáte, což je obzvláště důležité, pokud používáte kontejnery Docker.

Aby se model mohl účastnit vyhledávání Scout, je nutné Chcete-li explicitně označit jako prohledávatelné přidáním vlastnosti SearchableNapříklad pokud máte model Train, který představuje tabulku vlaků s polem pro název, můžete jej definovat takto:

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

Metoda searchableAs umožňuje přizpůsobit název indexu ve vyhledávačiMísto použití výchozího názvu odvozeného z modelu přebírá kontrolu Scout. Odtud Scout synchronizuje operace vytváření, aktualizace a mazání se vzdáleným nebo lokálním indexem v závislosti na zvoleném ovladači.

Laravel Scout s Algolií: Bleskově rychlé SaaS vyhledávání

Algolia je SaaS služba zaměřená na nabídnout velmi rychlé a relevantní vyhledávání napříč velkými objemy datMá webový panel pro správu indexů, pravidel relevance, synonym atd. a velmi dobře se integruje s Laravelem prostřednictvím Scoutu a oficiálního PHP klienta.

Chcete-li používat Algolii se Scoutem, budete muset nainstalovat jejího PHP klienta s Composerem, zaregistrovat své přihlašovací údaje v souboru .env (ID aplikace a klíč administrátorského API) a nastavit SCOUT_DRIVER=algolia sdělit aplikaci Scout, aby tento engine používala. Z panelu Algolia můžete získat jak ID aplikace, tak i administrativní klíč.

Jakmile je prostředí nakonfigurováno, můžete použít metody, jako například Train::search('text')->paginate(6) přímo do vašich kontrolerů pro provádění vyhledávání v indexovaných polích a příjem výsledků ve stránkovaném formátu Eloquent připraveném k předání do zobrazení Blade.

Např.Mohl bys mít ovladač index která vypíše všechny vlaky nebo provede vyhledávání, pokud je přijat parametr titlesearch, a metoda create pro vložení nových vlaků do indexu:

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

V odpovídajícím zobrazení můžete kombinovat formulář pro registraci nových vlaků a další GET formulář s polem titlesearch, které spustí vyhledávání po odeslání. Pak už jen stačí projít kolekcí vlaků a zobrazit jejich pole v tabulce s využitím stránkovacích odkazů generovaných Laravelem.

Scout s Meilisearch, databází a sbírkami

Pokud se chcete vyhnout externím službám, Meilisearch je vyhledávač s otevřeným zdrojovým kódem který můžete nasadit lokálně nebo na vaši infrastrukturu. Scout se integruje s Meilisearchem velmi podobným způsobem jako Algolia, jednoduše změnou ovladače a přidáním proměnných MEILISEARCH_HOST a MEILISEARCH_KEY do souboru .env.

Abyste ho mohli používat, nainstalujte si PHP klienta Meilisearch, upravte SCOUT_DRIVER=meilisearch a nasměrujte MEILISEARCH_HOST na URL instance (například http://127.0.0.1:7700). Pokud jste již měli předchozí záznamy, můžete je indexovat příkazem php artisan scout:import "App\Models\Train", aby je engine měl k dispozici.

V menších nebo středně velkých aplikacích si můžete také zvolit Databáze řidičů ScoutToto využívá fulltextové indexy a příkazy LIKE ve vaší databázi MySQL nebo PostgreSQL. V tomto případě nepotřebujete externí službu; jednoduše nastavte SCOUT_DRIVER=database, aby Scout používal samotnou databázi jako svůj vyhledávač.

Další zajímavou možností je kolekce ovladačů, která pracuje s kolekcemi Eloquent v pamětiTento engine filtruje výsledky pomocí klauzulí WHERE a filtrování kolekcí a je kompatibilní s jakoukoli databází podporovanou Laravelem. Můžete jej aktivovat pomocí `SCOUT_DRIVER=collection` nebo úpravou konfiguračního souboru Scout pro konkrétnější nastavení.

Integrace s Elasticsearch pomocí Průzkumníka

Pokud vaše potřeby vyhledávání zahrnují práce s obrovskými objemy dat a analýza v reálném časeElasticsearch je klasika. V ekosystému Laravelu je moderním způsobem, jak jej integrovat se Scoutem, použití kontroleru Explorer, který funguje jako most mezi vašimi modely a clusterem Elasticsearch.

K tomu se obvykle používá Docker spolu s bohatým souborem Docker-compose, který kromě typických služeb (Laravel, MySQL, Redis, Meilisearch atd.) Kontejnery Elasticsearch a KibanaPak nainstalujete balíček jeroen-g/explorer přes Composer a publikujete jeho konfigurační soubor, abyste označili, které modely mají být indexovány.

V souboru config/explorer.php můžete registrovat své modely pod klíčem indexes, například přidáním App\Modely\Vlak::třídaDále v souboru .env změníte ovladač Scout na elastic s parametrem SCOUT_DRIVER=elastic, aby vše odkazovalo na Elasticsearch.

V rámci modelu Train musí být implementováno rozhraní Explored a metoda přepsána. mapovatelné jakokterý definuje mapu polí, která budou odeslána do indexu. Minimální příklad by byl:

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

Od teď, Vyhledávání na Elasticsearch můžete spustit pomocí stejného rozhraní Scout., těží z velmi nízkých dob odezvy a plného dotazovacího výkonu tohoto enginu, ale bez opuštění ekosystému Laravelu.

Se všemi těmito přístupy – od základního automatického doplňování pomocí fetch nebo jQuery, přes filtrování na frontendu pomocí Alpine.js až po fulltextové vyhledávání pomocí Laravel Scout a různých ovladačů – Laravel nabízí širokou škálu možností pro implementaci vyhledávání v reálném čase. přizpůsobeno velikosti vašeho projektu, požadovanému výkonu a infrastruktuře, kterou jste ochotni udržovat.