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.
Komentar
Posting Komentar