Textbox Autocomplete menggunakan jQuery, PHP dan MySQL

Textbox Autocomplete sangat user friendly untuk website. Dalam tutorial ini kamu bisa belajar menerapkan pencarian seperti di Google. Dengan menggunakan jQuery UI kita dapat dengan mudah menampilkan saran otomatis dari database di bawah textbox.

Disini saya akan menampilkan textbox untuk entri Daftar Kota. Begitu pengguna mulai mengetik, saran otomatis daftar kota akan tercantum di bawah textbox. Data saran otomatis ini diambil dari tabel daftar_kota.

Library jQuery UI & jQuery

Kita perlu menyertakan library jQuery, library jQuery UI dan css jQuery UI.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

Tentukan fungsi pelengkapan otomatis dan berikan file sumber.

<script>
$(function() {
  $( "#daftar_kota" ).autocomplete({
    source: 'cari.php'
  });
});
</script>

HTML

Hanya membutuhkan HTML berikut:

<div class="ui-widget">
  <label for="daftar_kota">Kota: </label>
  <input id="daftar_kota">
</div>

File PHP

Kita bisa mendapatkan nilai textbox dengan bidang term ($_GET['term']) dari query string. Sekarang kita akan mengambil data dari tabel daftar_kota dan memfilter kota dengan $_GET['term']. Terakhir kita akan mengembalikan data kota yang difilter dalam format JSON.

<?php
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'codingan';

//menghubungkan ke database
$db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);

//mendapatkan input pencarian
$searchTerm = $_GET['term'];

//mendapatkan data yang sesuai dari tabel daftar_kota
$query = $db->query("SELECT * FROM daftar_kota WHERE kota LIKE '%".$searchTerm."%' ORDER BY kota ASC");
while ($row = $query->fetch_assoc()) {
    $data[] = $row['kota'];
}

//return data json
echo json_encode($data);
?>

Itu saja, langkah ini sudah cukup untuk implementasi textbox autocomplete di PHP.