Textbox Autocomplete menggunakan jQuery, PHP dan MySQL

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

BAGIKAN

1
Leave a Reply

avatar
400
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Abdul Recent comment authors
  Subscribe  
terbaru terlama vote teratas
Beritahu
Abdul
Tamu
Abdul

Thank, nice tutorial. Mas saya mau tanya, kalo nilai dari $_GET[‘term’] itu diambila dari mana ya, apakah nilai defaut?. Saya cari di form indexnya ga ada object term. Mohon pencerahannya. Terima kasih.