Wyszukiwarka na blogu – Meilisearch w akcji

Do bloga trafiła właśnie nowa funkcja, na którą czekałem od dawna — wyszukiwarka. Do tej pory nawigacja po treściach odbywała się wyłącznie przez kategorie i tagi; teraz można szybko dotrzeć do konkretnych artykułów, wpisując kilka słów kluczowych.

Search bar w nawigacji

W górnym pasku nawigacyjnym pojawiła się ikona lupy. Jej kliknięcie otwiera modal z polem wyszukiwania. Wyniki pojawiają się na bieżąco — z debouncingiem 300 ms — i są pogrupowane w trzy sekcje: posty, kategorie i tagi. Każdy wynik jest klikalnym linkiem prowadzącym bezpośrednio do danej strony. Pasujące fragmenty tekstu są podświetlane znacznikiem <mark>. Naciśnięcie klawisza ESC zamyka modal.

Komponent działa jako Livewire + Alpine.js: Livewire odpytuje backend przy każdej zmianie pola, Alpine kontroluje focus i animację.

Strona wyszukiwania

Po wpisaniu frazy i naciśnięciu Enter użytkownik trafia na stronę wyników (/posts?q=…), która wyświetla pełną listę pasujących artykułów z paginacją. Link „Pokaż wszystkie wyniki" w modalu również przenosi na tę stronę.

Silnik – Meilisearch

Pod spodem działa Meilisearch v1.11 — szybki, tolerancyjny na literówki silnik full-text search napisany w Rust. Indeks postów obejmuje tytuł, excerpt, treść artykułu, przypisane kategorie i tagi. Jednocześnie przeszukiwane są trzy indeksy: posts, categories i tags.

Meilisearch jest zintegrowany z Laravel Scout, co pozwala na automatyczne utrzymywanie indeksu w synchronizacji z bazą danych — każda zmiana statusu posta wyzwala asynchroniczną aktualizację indeksu przez kolejkę Laravel.