Panduan lengkap untuk carian masa nyata dalam Laravel

Informatec Digital » Sumber » Panduan lengkap untuk carian masa nyata dalam Laravel

Apabila anda mula bekerja dengan Laravel dan memerlukan a enjin carian masa nyata yang bertindak balas serta-mertaSangat mudah untuk tersesat di antara seribu pendekatan yang mungkin: AJAX dengan fetch, jQuery, Alpine.js, Scout dengan Algolia atau Meilisearch, penapisan bahagian hadapan, dsb. Berita baiknya ialah ekosistem Laravel sudah menyediakan hampir semua yang anda perlukan untuk menyediakan carian yang lancar dan pantas tanpa mati dalam percubaan.

Dalam artikel ini anda akan melihat cara memasang pelbagai jenis carian masa nyata dalam LaravelDaripada autolengkap AJAX klasik kepada carian teks penuh dengan Laravel Scout dan enjin carian seperti Algolia, Meilisearch, pangkalan data itu sendiri, atau juga Elasticsearch. Anda juga akan melihat alternatif ringan dengan Alpine.js untuk menapis data terus dalam penyemak imbas apabila volum data kecil.

Apakah carian masa nyata dalam Laravel dan bagaimana asasnya berfungsi?

Idea di sebalik carian masa nyata ialah, semasa pengguna menaip dalam medan teksPertanyaan dicetuskan dan hasilnya dikemas kini tanpa memuatkan semula halaman. Secara teknikal, ini melibatkan tiga komponen utama: bahagian belakang Laravel, JavaScript pelayar dan pertukaran data dalam format JSON.

Dalam satu tangan, Laravel bertindak sebagai lapisan pelayan Ia bertanggungjawab untuk menerima permintaan, mentafsir parameter carian (teks yang dimasukkan), menanyakan pangkalan data dan mengembalikan respons berstruktur, biasanya dalam format JSON. Respons ini boleh menunjukkan kejayaan, ralat atau tiada hasil ditemui.

Di hujung yang lain, JavaScript bertanggungjawab untuk mendengar acara pengguna. Pada input carian, hantar permintaan tak segerak (AJAX) ke bahagian belakang dan paparkan data yang dikembalikan pada halaman tanpa penyemak imbas melakukan muat semula penuh. Ini boleh dilakukan dengan pengambilan asli, jQuery AJAX, atau perpustakaan reaktif kecil seperti Alpine.js.

Dengan mekanisme asas ini anda boleh membina daripada a Autolengkap mudah dengan beberapa rekod, sehingga enjin carian teks penuh lanjutan dengan perkaitan, penomboran dan penapis, disokong oleh perpustakaan seperti Laravel Scout dan enjin carian luaran yang dioptimumkan untuk carian.

Model, laluan dan pengawal untuk enjin carian masa nyata asas

Sebelum anda mendalami JavaScript, anda perlu memastikan bahagian Laravel disusun dengan baik: model Fasih untuk mencari, mengosongkan laluan dan pengawal khusus untuk mengurus logik carian dalam masa nyata.

Langkah pertama ialah mempunyai model Eloquent yang mewakili jadual tempat anda akan mencari. Bayangkan jadual negara dan model yang dipanggil negara Sangat mudah, tanpa cap masa dan dengan tugasan pukal dibenarkan:

Contoh model Eloquent yang minimum untuk carian:

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

Ia ditunjukkan di sini bahawa model Pais terletak dalam ruang nama Laravel standardIa mewarisi daripada Model dan membolehkan anda menetapkan mana-mana medan dengan create() dengan membiarkan tatasusunan terkawal kosong. Dengan melumpuhkan cap masa dengan public $timestamps = false, anda mengelakkan masalah jika jadual tidak mempunyai lajur create_at dan updated_at.

Langkah seterusnya ialah menentukan laluan yang akan mengendalikan kedua-dua paparan enjin carian dan permintaan AJAXSkim yang sangat biasa menggabungkan laluan GET untuk memaparkan paparan dan laluan POST yang direka untuk menerima pertanyaan masa 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']);

Laluan akar mengembalikan paparan selamat datang, manakala URL /search dikhaskan untuk fungsi carianKaedah indeks() pengawal memaparkan borang dan input carian, manakala kaedah carian() memproses permintaan tak segerak yang dihantar daripada penyemak imbas.

Dalam pengawal anda boleh melaksanakan corak yang sangat praktikal: Sediakan tatasusunan respons lalai sekiranya berlaku ralat dan hanya tulis ganti apabila ia sememangnya permintaan AJAX yang sah dan pertanyaan dilaksanakan tanpa masalah.

Pengawal mungkin mempunyai a 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 ketika ini anda sudah mempunyai kitaran bahagian belakang lengkap: permintaan AJAX masuk, menyemak sama ada ia adalah AJAX, bertanya dengan tempat suka dan mengehadkan hasil kepada nombor yang munasabah menggunakan take(10) untuk mengelak daripada membebankan pangkalan data. Respons sentiasa dihantar dalam JSON, yang sangat memudahkan kerja bahagian hadapan.

Paparan bilah dan pengambilan JavaScript untuk carian reaktif

Dengan model, laluan dan pengawal sedia, sudah tiba masanya untuk membina bahagian yang boleh dilihat: borang dengan medan carian dan blok untuk memaparkan keputusan, serta JavaScript yang bertanggungjawab untuk membuat permintaan di latar belakang.

Pandangan Blade boleh menjadi sangat mudah, bergantung pada Token CSRF yang Laravel menyuntik untuk mengesahkan permintaan POST dan dalam input carian 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 skrip Dengar acara keyup pada input carianSetiap ketukan kekunci mencetuskan permintaan pengambilan ke laluan /search. Teks semasa medan dihantar dalam format JSON dan pengepala utama seperti X-Requested-With disertakan untuk menunjukkan bahawa ia adalah AJAX, bersama-sama dengan token CSRF untuk memintas perlindungan asli Laravel.

Apabila respons tiba, ia diubah menjadi JSON dan dijana secara dinamik. senarai HTML kecil dengan hasilnyaatau mesej seperti "Tiada hasil ditemui" apabila pertanyaan tidak mengembalikan data. Semua ini tanpa memuatkan semula halaman, secara semula jadi untuk pengguna.

Corak ini boleh diperhalusi lagi dengan butiran UX kecil, seperti menambah a kelewatan (debounce) antara ketukan kekunci, memaparkan pemuat atau mengendalikan ralat rangkaian untuk menghalang antara muka daripada kelihatan beku apabila sesuatu gagal.

Carian langsung dengan Laravel dan AJAX menggunakan jQuery

Walaupun fetch telah mendapat banyak tempat pada masa kini, jQuery AJAX kekal sangat popular dalam projek warisan atau pada pasukan yang telah melaksanakannya. Ideanya adalah sama: tangkap jenis pengguna, buat permintaan tak segerak dan muat semula DOM.

Aliran kerja biasa dengan jQuery dalam Laravel untuk carian langsung biasanya termasuk langkah asas ini: tentukan laluan tertentu, cipta pengawal khusus, bina paparan Blade dengan input carian Dan akhirnya, tambahkan kod jQuery yang mencetuskan AJAX semasa ia ditaip.

Proses ini berfungsi seperti ini: apabila pengguna mula menaip, jQuery menghantar pertanyaan kepada pelayan dengan rentetan carian. Laravel menapis maklumat dalam pangkalan data, mengembalikan JSON dengan hasil yang sepadan dan jQuery mengemas kini bekas HTML pada halaman untuk menggambarkan padanan, semuanya dalam hitungan milisaat.

Kelebihan menggunakan jQuery ialah Ia cukup banyak meringkaskan sintaks AJAX Dan ia sangat mudah untuk dibaca jika anda sudah mempunyai perpustakaan dalam projek anda. Walau bagaimanapun, anda menambah pergantungan tambahan yang mungkin tidak diperlukan jika anda boleh menggunakan JavaScript moden dan pengambilan asli.

Penapisan masa nyata dan carian pada bahagian hadapan dengan Alpine.js

Apabila data yang akan dipaparkan agak kecil (contohnya, kurang daripada 50 item), ia tidak semestinya berbaloi untuk menyediakan bahagian belakang dengan carian yang kompleks. Dalam kes tersebut, pilihan yang sangat mudah ialah Tapis terus dalam penyemak imbas dengan Alpine.js, tanpa membuat permintaan kepada pelayan semasa pengguna menaip.

Ideanya ialah untuk pra-kira rentetan carian untuk setiap elemen (contohnya, nama, perihalan dan kategori dalam huruf kecil), simpannya dalam atribut teks carian data dan biarkan Alpine.js mengendalikan yang lain. menunjukkan atau menyembunyikan unsur mengikut teks bertulis dalam medan carian.

Komponen Alpine.js boleh mempunyai struktur yang serupa dengan ini: penapisItem

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

Pada pandangan, setiap kad atau baris data akan membawa atribut data-search-text dengan teks yang telah disediakan dalam huruf kecilOleh itu, penapis dikurangkan kepada fungsi includes() dalam JavaScript, yang sangat pantas untuk senarai 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 boleh memaparkan blok keadaan kosong hanya apabila Tiada hasil carian untuk istilah carian semasa.menjemput pengguna untuk mengubah suai teks atau mengosongkan medan dengan butang yang hanya menetapkan semula carian kepada rentetan kosong.

Pendekatan ini mempunyai kelebihan yang jelas: Tiada panggilan pelayan semasa carian.Interaksi adalah hampir serta-merta, dan logiknya kekal sangat setempat dan mudah untuk nyahpepijat. Ia sesuai untuk pemilih pantas, mod pemilihan item atau katalog kecil yang dibenamkan dalam halaman Laravel.

Laravel Scout: Carian teks penuh dengan enjin khusus

Apabila keadaan menjadi serius dan anda perlukan carian teks penuh yang pantas, relevan dan berskalaLaluan semula jadi di Laravel ialah Laravel Scout. Scout ialah lapisan integrasi yang membolehkan anda menyambungkan model Eloquent anda dengan mudah dengan enjin carian seperti Algolia, Meilisearch, pangkalan data anda sendiri, koleksi dalam memori, atau juga Elasticsearch melalui pengawal luaran.

Untuk bermula dengan Scout, perkara biasa ialah buat projek Laravel baharu atau gunakan semula projek sedia adaUntuk melancarkannya, gunakan Docker (contohnya, dengan Laravel Sail) dan kemudian pasang perpustakaan dengan Composer. Setelah itu selesai, terbitkan fail konfigurasi scout.php dan laraskan pembolehubah persekitaran mengikut pemacu yang anda mahu gunakan.

Aliran kerja biasa ialah memasang Scout dengan Komposer, menerbitkan konfigurasinya dan aktifkan baris gilir pengindeksan dengan SCOUT_QUEUE=true Dalam fail .env, pastikan operasi intensif sumber diproses di latar belakang, meningkatkan masa tindak balas aplikasi. Selain itu, anda mesti memastikan bahawa DB_HOST menunjuk ke pangkalan data yang anda gunakan, yang amat penting jika anda menggunakan bekas Docker.

Untuk membolehkan model menyertai carian Pengakap, adalah perlu untuk Untuk menandai secara eksplisit sebagai boleh dicari dengan menambahkan sifat Boleh dicariContohnya, jika anda mempunyai model Kereta Api yang mewakili jadual kereta api dengan medan tajuk, anda boleh mentakrifkannya 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';
}
}

Kaedah searchableAs membenarkan sesuaikan nama indeks dalam enjin carianDaripada menggunakan nama lalai yang diperoleh daripada model, Scout mengambil alih. Dari sini, Scout mengendalikan operasi penyegerakan penciptaan, kemas kini dan pemadaman dengan indeks jauh atau setempat, bergantung pada pemacu yang dipilih.

Pengakap Laravel dengan Algolia: Carian SaaS sepantas kilat

Algolia ialah perkhidmatan SaaS yang difokuskan untuk menawarkan carian yang sangat pantas dan berkaitan merentas volum data yang besarIa mempunyai panel web untuk mengurus indeks, peraturan perkaitan, sinonim, dsb., dan disepadukan dengan baik dengan Laravel melalui Scout dan pelanggan PHP rasmi.

Untuk menggunakan Algolia dengan Scout, anda perlu memasang klien PHPnya dengan Composer, mendaftarkan kelayakan anda dalam fail .env (ID Aplikasi dan Kunci API Pentadbiran) dan tetapkan SCOUT_DRIVER=algolia untuk memberitahu Scout untuk menggunakan enjin ini. Daripada panel Algolia anda boleh mendapatkan kedua-dua ID aplikasi dan kunci pentadbiran.

Setelah persekitaran dikonfigurasikan, anda boleh menggunakan kaedah seperti Train::search('text')->paginate(6) terus ke dalam pengawal anda untuk melakukan carian pada medan diindeks, menerima hasil dalam format Eloquent bernombor sedia untuk dihantar ke paparan Blade.

Sebagai contohAnda boleh mempunyai pengawal indeks yang menyenaraikan semua kereta api atau melakukan carian jika parameter carian tajuk diterima, dan kaedah cipta untuk memasukkan kereta api baharu 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();
}

Dalam paparan yang sepadan, anda boleh menggabungkan borang pendaftaran kereta api baharu dan satu lagi borang GET dengan medan carian tajuk yang mencetuskan carian semasa penyerahan. Kemudian anda hanya perlu mengulangi koleksi kereta api dan memaparkan medannya dalam jadual, mengambil kesempatan daripada pautan penomboran yang dijana oleh Laravel.

Pengakap dengan Meilisearch, pangkalan data dan koleksi

Jika anda lebih suka mengelakkan perkhidmatan luaran, Meilisearch ialah enjin carian sumber terbuka yang boleh anda gunakan secara tempatan atau pada infrastruktur anda. Scout menyepadukan dengan Meilisearch dengan cara yang hampir serupa dengan Algolia, hanya dengan menukar pemacu dan menambah pembolehubah MEILISEARCH_HOST dan MEILISEARCH_KEY pada fail .env.

Untuk menggunakannya, anda memasang klien Meilisearch PHP, laraskan SCOUT_DRIVER=meilisearch dan arahkan MEILISEARCH_HOST ke URL contoh (contohnya, http://127.0.0.1:7700). Jika anda sudah mempunyai rekod sebelumnya, anda boleh mengindeksnya dengan arahan php artisan scout:import "App\Models\Train" supaya enjin menyediakannya.

Dalam aplikasi yang lebih kecil atau sederhana, anda juga boleh memilih Pangkalan data pemandu pengakapIni memanfaatkan indeks teks penuh dan arahan LIKE pada pangkalan data MySQL atau PostgreSQL anda. Dalam kes ini, anda tidak memerlukan perkhidmatan luaran; hanya tetapkan SCOUT_DRIVER=pangkalan data untuk Scout menggunakan pangkalan data itu sendiri sebagai enjin cariannya.

Pilihan lain yang menarik adalah koleksi pemandu, yang berfungsi pada koleksi Eloquent dalam ingatanEnjin ini menapis hasil menggunakan klausa WHERE dan penapisan koleksi, dan serasi dengan mana-mana pangkalan data yang disokong oleh Laravel. Anda boleh mengaktifkannya dengan `SCOUT_DRIVER=collection` atau dengan melaraskan fail konfigurasi Scout untuk tetapan yang lebih khusus.

Integrasi dengan Elasticsearch menggunakan Explorer

Jika keperluan carian anda melibatkan bekerja dengan jumlah data yang besar dan analisis masa nyataElasticsearch adalah klasik. Dalam ekosistem Laravel, cara moden untuk mengintegrasikannya dengan Scout ialah menggunakan pengawal Explorer, yang bertindak sebagai jambatan antara model anda dan kelompok Elasticsearch.

Untuk melakukan ini, Docker biasanya digunakan, bersama-sama dengan fail docker-compose yang kaya, sebagai tambahan kepada perkhidmatan biasa (Laravel, MySQL, Redis, Meilisearch, dll.), Bekas Elasticsearch dan KibanaKemudian anda memasang pakej jeroen-g/explorer melalui Komposer dan menerbitkan fail konfigurasinya untuk menunjukkan model mana yang harus diindeks.

Dalam fail config/explorer.php anda boleh mendaftarkan model anda di bawah kunci indeks, contohnya dengan menambah App\Models\Train::classSelain itu, anda menukar pemandu Pengakap kepada elastik dalam fail .env dengan SCOUT_DRIVER=elastic supaya semuanya menghala ke Elasticsearch.

Dalam model Kereta Api, antara muka Terjelajah mesti dilaksanakan dan kaedah ditindih. mappableAsyang mentakrifkan peta medan yang akan dihantar ke indeks. Contoh minimum ialah:

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

Bermula dari sekarang, Anda boleh melancarkan carian di Elasticsearch menggunakan antara muka Pengakap yang sama., mendapat manfaat daripada masa tindak balas yang sangat rendah dan kuasa pertanyaan penuh enjin ini, tetapi tanpa meninggalkan ekosistem Laravel.

Dengan semua pendekatan ini—daripada autolengkap asas dengan pengambilan atau jQuery, kepada penapisan bahagian hadapan dengan Alpine.js, kepada carian teks penuh dengan Laravel Scout dan pelbagai pemacu— Laravel memberi anda pelbagai pilihan untuk melaksanakan carian masa nyata disesuaikan dengan saiz projek anda, prestasi yang anda perlukan dan infrastruktur yang anda bersedia untuk mengekalkan.