Membangun Fitur Pencarian Instan (Live Search) Menggunakan PHP, MySQL, dan jQuery
Pencarian instan (live search) adalah fitur yang memungkinkan pengguna untuk melihat hasil pencarian langsung saat mereka mengetikkan kata kunci, tanpa harus menekan tombol submit atau me-reload halaman. Fitur ini memberikan pengalaman pengguna yang lebih baik dan terlihat lebih interaktif. Dalam tutorial ini, kita akan membuat fitur pencarian instan menggunakan PHP, MySQL, dan jQuery.
Langkah 1: Persiapan Database
Pertama, kita memerlukan database MySQL untuk menyimpan data yang akan dicari. Buat database dan tabel berikut:
CREATE DATABASE tutorial_live_search;
USE tutorial_live_search;
CREATE TABLE produk (
id INT AUTO_INCREMENT PRIMARY KEY,
nama_produk VARCHAR(255) NOT NULL,
deskripsi TEXT
);
Kemudian, tambahkan beberapa data sampel:
INSERT INTO produk (nama_produk, deskripsi) VALUES
('Laptop Lenovo', 'Laptop dengan prosesor i5 dan RAM 8GB.'),
('Smartphone Samsung', 'Smartphone dengan layar 6.5 inci dan kapasitas 128GB.'),
('Headphone Sony', 'Headphone dengan kualitas suara tinggi dan fitur noise-canceling.'),
('Tablet Apple', 'Tablet dengan layar retina dan penyimpanan 64GB.'),
('Smartwatch Huawei', 'Jam pintar dengan fitur pelacak kebugaran dan notifikasi.');
Langkah 2: Membuat Tampilan Pencarian di HTML
Selanjutnya, kita buat form pencarian sederhana menggunakan HTML. Form ini akan berisi input untuk mengetik kata kunci yang ingin dicari.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Search dengan PHP, MySQL, dan jQuery</title>
<style>
/* Styling sederhana untuk hasil pencarian */
.hasil-pencarian {
margin-top: 10px;
border: 1px solid #ddd;
padding: 10px;
background-color: #f9f9f9;
}
.hasil-item {
padding: 5px 0;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>Pencarian Produk</h1>
<input type="text" id="kataKunci" placeholder="Cari produk...">
<div id="hasilPencarian" class="hasil-pencarian"></div>
<!-- jQuery Library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Pada contoh di atas, kita memiliki elemen input untuk mengetik kata kunci dan sebuah <div> dengan id hasilPencarian yang akan menampilkan hasil pencarian.
Langkah 3: Membuat File PHP untuk Proses Pencarian
Kita buat file pencarian.php yang akan menangani permintaan pencarian dari JavaScript dan mengembalikan hasilnya dalam format HTML.
<?php
// Koneksi ke database
$conn = new mysqli("localhost", "root", "", "tutorial_live_search");
if ($conn->connect_error) {
die("Koneksi gagal: " . $conn->connect_error);
}
$kataKunci = $_POST['kataKunci'];
$query = "SELECT * FROM produk WHERE nama_produk LIKE '%$kataKunci%' OR deskripsi LIKE '%$kataKunci%'";
$result = $conn->query($query);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "<div class='hasil-item'><strong>" . $row['nama_produk'] . "</strong><br>" . $row['deskripsi'] . "</div>";
}
} else {
echo "<div class='hasil-item'>Tidak ada hasil ditemukan.</div>";
}
$conn->close();
?>
Pada file ini:
- Kita terima kata kunci dari input yang dikirim oleh JavaScript.
- Kita gunakan query
LIKEuntuk mencocokkan kata kunci dengan data di kolomnama_produkataudeskripsi. - Jika hasil ditemukan, kita tampilkan dalam format HTML.
Langkah 4: Menambahkan Fungsi jQuery untuk Mengirim Data ke PHP
Kita tambahkan file JavaScript script.js untuk menangani input dari pengguna dan mengirim permintaan pencarian ke server menggunakan AJAX.
$(document).ready(function(){
$("#kataKunci").on("keyup", function() {
let kataKunci = $(this).val();
if (kataKunci.length > 2) { // Minimal 3 karakter
$.ajax({
url: "pencarian.php",
method: "POST",
data: { kataKunci: kataKunci },
success: function(data) {
$("#hasilPencarian").html(data);
}
});
} else {
$("#hasilPencarian").html("");
}
});
});
Pada script.js ini:
- Kita menggunakan event
keyuppada input#kataKunciuntuk menangkap setiap perubahan saat pengguna mengetik. - Jika panjang kata kunci lebih dari dua karakter, kita kirimkan data ke
pencarian.phpmenggunakan AJAX dengan metodePOST. - Jika ada hasil, kita tampilkan di dalam
<div id="hasilPencarian">.
Langkah 5: Menjalankan dan Menguji Aplikasi
Sekarang, coba akses file HTML dan ketik kata kunci dalam kolom pencarian. Hasil pencarian akan muncul di bawah input secara instan, tanpa perlu me-reload halaman.
Kesimpulan
Dengan menggabungkan PHP, MySQL, dan jQuery, kita bisa membuat fitur pencarian instan yang ringan dan user-friendly. Teknik ini juga bisa diterapkan pada proyek lain seperti pencarian produk, artikel, atau data pengguna di berbagai aplikasi berbasis web.
