by 
Pernahkah Anda mengetik di kotak pencarian dan hasilnya langsung muncul tanpa halaman berkedip? Itulah Ajax search PHP — pencarian data secara real-time tanpa memuat ulang halaman. Fitur ini memberikan pengalaman yang cepat dan modern bagi pengguna.
Bagaimana Cara Kerjanya?
Konsepnya sederhana: setiap kali pengguna mengetik, JavaScript mengirim permintaan ke file PHP di latar belakang. PHP mencari data di MySQL, lalu mengirim hasilnya kembali untuk ditampilkan — semua tanpa reload.
Sisi Front-End (HTML + JavaScript)
<input type="text" id="cari" placeholder="Cari produk...">
<div id="hasil"></div>
<script>
document.getElementById("cari").addEventListener("keyup", function() {
fetch("cari.php?q=" + this.value)
.then(res => res.text())
.then(data => {
document.getElementById("hasil").innerHTML = data;
});
});
</script>
Setiap ketikan memicu fungsi yang mengambil hasil dari cari.php dan menampilkannya di dalam div hasil.
Sisi Back-End (cari.php)
File ini menerima kata kunci, mencari di database dengan aman, dan mengembalikan hasilnya:
<?php
$kata = "%" . $_GET["q"] . "%";
$stmt = $koneksi->prepare("SELECT nama FROM produk WHERE nama LIKE ?");
$stmt->bind_param("s", $kata);
$stmt->execute();
$hasil = $stmt->get_result();
while ($p = $hasil->fetch_assoc()) {
echo $p["nama"] . "<br>";
}
?>
Pentingnya Keamanan
Perhatikan penggunaan prepared statement pada contoh di atas. Karena kata kunci berasal langsung dari input pengguna, mengabaikan ini akan membuka celah SQL injection yang serius.
Kesimpulan
Dengan Ajax search PHP, pencarian menjadi instan dan mulus, sangat meningkatkan pengalaman pengguna. Kombinasikan JavaScript untuk mengambil data dan PHP dengan prepared statement untuk memprosesnya secara aman.
Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi PHP (php.net).
