Panduan lengkap untuk pencarian real-time di Laravel

Informatec Digital » Sumber daya » Panduan lengkap untuk pencarian real-time di Laravel

Ketika Anda mulai bekerja dengan Laravel dan membutuhkan mesin pencari waktu nyata yang merespons secara instanSangat mudah untuk tersesat di antara ribuan pendekatan yang mungkin: AJAX dengan fetch, jQuery, Alpine.js, Scout dengan Algolia atau Meilisearch, penyaringan frontend, dsb. Berita baiknya adalah ekosistem Laravel sudah menyediakan hampir semua yang Anda butuhkan untuk menyiapkan pencarian yang lancar dan cepat tanpa mati saat mencobanya.

Pada artikel ini Anda akan melihat cara merakit berbagai jenis pencarian waktu nyata di LaravelDari pelengkapan otomatis AJAX klasik hingga pencarian teks lengkap dengan Laravel Scout dan mesin pencari seperti Algolia, Meilisearch, basis data itu sendiri, atau bahkan Elasticsearch. Anda juga akan melihat alternatif ringan dengan Alpine.js untuk memfilter data langsung di peramban ketika volume datanya kecil.

Apa itu pencarian real-time di Laravel dan bagaimana cara kerja dasarnya?

Ide di balik pencarian waktu nyata adalah, saat pengguna mengetik di kolom teksSebuah kueri dipicu dan hasilnya diperbarui tanpa perlu memuat ulang halaman. Secara teknis, proses ini melibatkan tiga komponen utama: backend Laravel, JavaScript peramban, dan pertukaran data dalam format JSON.

Di satu sisi, Laravel bertindak sebagai lapisan server Ia bertanggung jawab untuk menerima permintaan, menginterpretasikan parameter pencarian (teks yang dimasukkan), melakukan kueri ke basis data, dan mengembalikan respons terstruktur, biasanya dalam format JSON. Respons ini dapat menunjukkan keberhasilan, kesalahan, atau tidak adanya hasil yang ditemukan.

Di ujung lain, JavaScript bertanggung jawab untuk mendengarkan peristiwa pengguna. Pada input pencarian, kirim permintaan asinkron (AJAX) ke backend dan tampilkan data yang dikembalikan di halaman tanpa perlu penyegaran penuh oleh browser. Hal ini dapat dilakukan dengan fetch native, jQuery AJAX, atau pustaka reaktif kecil seperti Alpine.js.

Dengan mekanisme dasar ini Anda dapat membangun dari Pelengkapan otomatis sederhana dengan beberapa rekaman, hingga mesin pencari teks lengkap yang canggih dengan relevansi, paginasi, dan filter, didukung oleh pustaka seperti Laravel Scout dan mesin pencari eksternal yang dioptimalkan untuk pencarian.

Model, rute, dan pengontrol untuk mesin pencari waktu nyata dasar

Sebelum Anda mempelajari JavaScript, Anda perlu memastikan sisi Laravel terorganisir dengan baik: model Eloquent untuk pencarian, rute yang jelas, dan pengontrol khusus untuk mengelola logika pencarian secara real time.

Langkah pertama adalah memiliki model Eloquent yang mewakili tabel tempat Anda akan mencari. Bayangkan sebuah tabel negara dan sebuah model bernama Orangtua Sangat sederhana, tanpa stempel waktu dan dengan penugasan massal yang diizinkan:

Contoh model Eloquent minimal untuk pencarian:

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

Di sini ditunjukkan bahwa model Pais terletak di namespace Laravel standarIni mewarisi dari Model dan memungkinkan Anda menetapkan kolom apa pun dengan create() dengan membiarkan array yang dijaga kosong. Dengan menonaktifkan stempel waktu dengan public $timestamps = false, Anda menghindari masalah jika tabel tidak memiliki kolom created_at dan updated_at.

Langkah selanjutnya adalah mendefinisikan rute yang akan menangani tampilan mesin pencari dan permintaan AJAXSkema yang sangat umum menggabungkan rute GET untuk menampilkan tampilan dan rute POST yang dirancang untuk menerima kueri waktu nyata:

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

Rute root mengembalikan tampilan selamat datang, sementara URL /search dicadangkan untuk fungsi pencarianMetode index() pengontrol menampilkan formulir dan masukan pencarian, sementara metode search() memproses permintaan asinkron yang dikirim dari browser.

Pada pengontrol Anda dapat menerapkan pola yang sangat praktis: Siapkan array respons default jika terjadi kesalahan dan hanya menimpanya jika itu memang permintaan AJAX yang valid dan kueri tersebut dijalankan tanpa masalah.

Pengontrol mungkin memiliki struktur serupa ini:

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

Pada titik ini Anda sudah memiliki siklus backend lengkap: permintaan AJAX masuk, memeriksa apakah itu AJAX, menanyakan di mana seperti dan membatasi hasil ke angka yang wajar menggunakan take(10) untuk menghindari kelebihan beban pada basis data. Respons selalu dikirim dalam format JSON, yang sangat menyederhanakan pekerjaan frontend.

Tampilan blade dan pengambilan JavaScript untuk pencarian reaktif

Setelah model, rute, dan pengontrol siap, saatnya membangun bagian yang terlihat: formulir dengan bidang pencarian dan blok untuk menampilkan hasilnya, ditambah JavaScript yang bertanggung jawab untuk membuat permintaan di latar belakang.

Tampilan Blade bisa sangat sederhana, bergantung pada Token CSRF yang disuntikkan Laravel untuk memvalidasi permintaan POST dan dalam input pencarian yang mudah digunakan:

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

Dalam contoh ini skripnya Dengarkan acara keyup pada input pencarianSetiap penekanan tombol memicu permintaan pengambilan ke jalur /search. Teks kolom saat ini dikirim dalam format JSON, dan header kunci seperti X-Requested-With disertakan untuk menunjukkan bahwa kolom tersebut berformat AJAX, beserta token CSRF untuk melewati proteksi bawaan Laravel.

Ketika respons tiba, respons tersebut diubah menjadi JSON dan dibuat secara dinamis. daftar HTML kecil dengan hasilatau pesan seperti "Tidak ada hasil yang ditemukan" ketika kueri tidak menghasilkan data. Semua ini dilakukan tanpa memuat ulang halaman, dengan cara yang alami bagi pengguna.

Pola ini dapat disempurnakan lebih lanjut dengan detail UX kecil, seperti menambahkan menunda (debounce) di antara penekanan tombol, menampilkan pemuat atau menangani kesalahan jaringan untuk mencegah antarmuka tampak membeku saat terjadi kesalahan.

Pencarian langsung dengan Laravel dan AJAX menggunakan jQuery

Meskipun fetch telah berkembang pesat saat ini, jQuery AJAX masih sangat populer dalam proyek lama atau di tim yang sudah menerapkannya. Idenya persis sama: menangkap apa yang diketik pengguna, membuat permintaan asinkron, dan menyegarkan DOM.

Alur kerja umum dengan jQuery di Laravel untuk pencarian langsung biasanya mencakup langkah-langkah dasar berikut: menentukan rute tertentu, membuat pengontrol khusus, membangun tampilan Blade dengan input pencarian Dan terakhir, tambahkan kode jQuery yang memicu AJAX saat diketik.

Prosesnya bekerja seperti ini: ketika pengguna mulai mengetik, jQuery mengirimkan kueri ke server dengan string pencarian. Laravel memfilter informasi dalam basis data, mengembalikan JSON berisi hasil yang cocok, dan jQuery memperbarui kontainer HTML di halaman untuk mencerminkan kecocokan tersebut, semuanya dalam hitungan milidetik.

Keuntungan menggunakan jQuery adalah Ini cukup merangkum sintaks AJAX Dan sangat mudah dibaca jika Anda sudah memiliki pustaka tersebut di proyek Anda. Namun, Anda menambahkan dependensi tambahan yang mungkin tidak diperlukan jika Anda dapat bekerja dengan JavaScript modern dan fetch native.

Pemfilteran dan pencarian waktu nyata di frontend dengan Alpine.js

Ketika data yang akan ditampilkan relatif kecil (misalnya, kurang dari 50 item), tidak selalu ada gunanya menyiapkan backend dengan pencarian yang rumit. Dalam kasus tersebut, opsi yang sangat praktis adalah Filter langsung di browser dengan Alpine.js, tanpa membuat permintaan ke server saat pengguna mengetik.

Idenya adalah untuk menghitung terlebih dahulu string pencarian untuk setiap elemen (misalnya, nama, deskripsi, dan kategori dalam huruf kecil), menyimpannya dalam atribut data-search-text, dan membiarkan Alpine.js menangani sisanya. menampilkan atau menyembunyikan elemen sesuai dengan teks tertulis di kolom pencarian.

Komponen Alpine.js dapat memiliki struktur yang mirip dengan ini: 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;
},
}

Dalam tampilan, setiap kartu atau baris data akan membawa atribut data-search-text dengan teks yang sudah disiapkan dalam huruf kecilOleh karena itu, filter disederhanakan menjadi fungsi include() dalam JavaScript, yang sangat cepat untuk daftar pendek:

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

Selain itu, Anda dapat menampilkan blok status kosong hanya ketika Tidak ada hasil untuk istilah pencarian saat ini.mengundang pengguna untuk mengubah teks atau mengosongkan kolom dengan tombol yang cukup mengatur ulang pencarian ke string kosong.

Pendekatan ini memiliki keuntungan yang jelas: Tidak ada panggilan server selama pencarian.Interaksinya hampir instan, dan logikanya tetap sangat lokal dan mudah di-debug. Sempurna untuk pemilih cepat, modal pemilihan item, atau katalog kecil yang disematkan di halaman Laravel.

Laravel Scout: Pencarian teks lengkap dengan mesin khusus

Ketika hal-hal menjadi serius dan Anda membutuhkan pencarian teks lengkap yang cepat, relevan, dan terukurJalur alami di Laravel adalah Laravel Scout. Scout adalah lapisan integrasi yang memungkinkan Anda menghubungkan model Eloquent dengan mudah ke mesin pencari seperti Algolia, Meilisearch, basis data Anda sendiri, koleksi dalam memori, atau bahkan Elasticsearch melalui pengontrol eksternal.

Untuk memulai dengan Scout, hal yang biasa dilakukan adalah buat proyek Laravel baru atau gunakan kembali yang sudah adaUntuk menjalankannya, gunakan Docker (misalnya, dengan Laravel Sail) lalu instal pustaka tersebut dengan Composer. Setelah selesai, publikasikan berkas konfigurasi scout.php dan sesuaikan variabel lingkungan sesuai dengan driver yang ingin Anda gunakan.

Alur kerja yang umum adalah menginstal Scout dengan Composer, menerbitkan konfigurasinya, dan aktifkan antrian pengindeksan dengan SCOUT_QUEUE=true Dalam berkas .env, pastikan operasi yang membutuhkan banyak sumber daya diproses di latar belakang, sehingga meningkatkan waktu respons aplikasi. Selain itu, Anda harus memastikan bahwa DB_HOST mengarah ke basis data yang Anda gunakan, hal ini sangat penting jika Anda menggunakan kontainer Docker.

Agar model dapat berpartisipasi dalam pencarian Pramuka, perlu untuk Untuk menandainya secara eksplisit sebagai dapat dicari dengan menambahkan sifat Dapat DicariMisalnya, jika Anda memiliki model Kereta yang mewakili tabel kereta dengan bidang judul, Anda dapat mendefinisikannya seperti ini:

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

Metode searchableAs memungkinkan sesuaikan nama indeks di mesin pencariAlih-alih menggunakan nama default yang berasal dari model, Scout mengambil alih. Dari sini, Scout menangani sinkronisasi operasi pembuatan, pembaruan, dan penghapusan dengan indeks jarak jauh atau lokal, tergantung pada driver yang dipilih.

Laravel Scout dengan Algolia: Pencarian SaaS Secepat Kilat

Algolia adalah layanan SaaS yang berfokus pada untuk menawarkan pencarian yang sangat cepat dan relevan di seluruh volume data yang besarIa memiliki panel web untuk mengelola indeks, aturan relevansi, sinonim, dll., dan terintegrasi sangat baik dengan Laravel melalui Scout dan klien PHP resmi.

Untuk menggunakan Algolia dengan Scout, Anda perlu menginstal klien PHP-nya dengan Composer, mendaftarkan kredensial Anda di file .env (ID Aplikasi dan Kunci API Admin), dan tetapkan SCOUT_DRIVER=algolia untuk memberi tahu Scout agar menggunakan mesin ini. Dari panel Algolia, Anda bisa mendapatkan ID aplikasi dan kunci administratif.

Setelah lingkungan dikonfigurasi, Anda dapat menggunakan metode seperti Kereta::pencarian('teks')->paginasi(6) langsung ke pengontrol Anda untuk melakukan penelusuran pada bidang yang diindeks, menerima hasil dalam format Eloquent yang diberi halaman dan siap diteruskan ke tampilan Blade.

misalnyaAnda bisa memiliki pengontrol indeks yang mencantumkan semua kereta atau melakukan pencarian jika parameter titlesearch diterima, dan metode buat untuk memasukkan kereta baru ke dalam indeks:

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

Pada tampilan yang sesuai, Anda dapat menggabungkan formulir pendaftaran kereta api baru dan formulir GET lain dengan kolom titlesearch yang memicu pencarian setelah pengiriman. Selanjutnya, Anda hanya perlu mengulangi kumpulan rangkaian dan menampilkan kolomnya dalam tabel, memanfaatkan tautan pagination yang dihasilkan oleh Laravel.

Scout dengan Meilisearch, database dan koleksi

Jika Anda lebih suka menghindari layanan eksternal, Meilisearch adalah mesin pencari sumber terbuka yang dapat Anda terapkan secara lokal atau di infrastruktur Anda. Scout terintegrasi dengan Meilisearch dengan cara yang sangat mirip dengan Algolia, cukup dengan mengubah driver dan menambahkan variabel MEILISEARCH_HOST dan MEILISEARCH_KEY ke berkas .env.

Untuk menggunakannya, Anda menginstal klien PHP Meilisearch, sesuaikan SCOUT_DRIVER=meilisearch dan arahkan MEILISEARCH_HOST ke URL instans (misalnya, http://127.0.0.1:7700). Jika Anda sudah memiliki rekaman sebelumnya, Anda dapat mengindeksnya dengan perintah php artisan scout:import "App\Models\Train" agar mesin dapat mengaksesnya.

Pada aplikasi yang lebih kecil atau sedang, Anda juga dapat memilih Basis data pengemudi ScoutIni memanfaatkan indeks teks lengkap dan perintah LIKE pada basis data MySQL atau PostgreSQL Anda. Dalam hal ini, Anda tidak memerlukan layanan eksternal; cukup atur SCOUT_DRIVER=database agar Scout dapat menggunakan basis data itu sendiri sebagai mesin pencarinya.

Pilihan menarik lainnya adalah koleksi driver, yang bekerja pada koleksi Eloquent dalam memoriMesin ini memfilter hasil menggunakan klausa WHERE dan pemfilteran koleksi, serta kompatibel dengan semua basis data yang didukung Laravel. Anda dapat mengaktifkannya dengan `SCOUT_DRIVER=collection` atau dengan menyesuaikan berkas konfigurasi Scout untuk pengaturan yang lebih spesifik.

Integrasi dengan Elasticsearch menggunakan Explorer

Jika kebutuhan pencarian Anda melibatkan bekerja dengan volume data yang besar dan analisis waktu nyataElasticsearch adalah contoh klasik. Dalam ekosistem Laravel, cara modern untuk mengintegrasikannya dengan Scout adalah dengan menggunakan pengontrol Explorer, yang bertindak sebagai jembatan antara model Anda dan klaster Elasticsearch.

Untuk melakukan hal ini, Docker biasanya digunakan, bersama dengan file docker-compose yang kaya, selain layanan umum (Laravel, MySQL, Redis, Meilisearch, dll.), Kontainer Elasticsearch dan KibanaKemudian Anda menginstal paket jeroen-g/explorer melalui Composer dan menerbitkan berkas konfigurasinya untuk menunjukkan model mana yang harus diindeks.

Dalam file config/explorer.php Anda dapat mendaftarkan model Anda di bawah kunci indeks, misalnya dengan menambahkan Aplikasi\Model\Kereta::kelasSelain itu, Anda mengubah driver Scout menjadi elastis dalam file .env dengan SCOUT_DRIVER=elastic sehingga semuanya mengarah ke Elasticsearch.

Dalam model Kereta, antarmuka Dieksplorasi harus diimplementasikan dan metodenya diganti. dapat dipetakanSebagaiyang mendefinisikan peta bidang yang akan dikirim ke indeks. Contoh minimalnya adalah:

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

Dari sekarang, Anda dapat meluncurkan penelusuran di Elasticsearch menggunakan antarmuka Scout yang sama., mendapatkan keuntungan dari waktu respons yang sangat rendah dan kekuatan kueri penuh dari mesin ini, tetapi tanpa meninggalkan ekosistem Laravel.

Dengan semua pendekatan ini—dari pelengkapan otomatis dasar dengan fetch atau jQuery, hingga pemfilteran frontend dengan Alpine.js, hingga pencarian teks lengkap dengan Laravel Scout dan berbagai driver— Laravel memberi Anda berbagai pilihan untuk mengimplementasikan pencarian waktu nyata disesuaikan dengan ukuran proyek Anda, kinerja yang Anda butuhkan, dan infrastruktur yang ingin Anda pelihara.