Hallo sahabat Dumenity berjumpa lagi dalam tutorial kursuswebprogramming, pada tutorial kali ini kita akan belajar tentang Bootstrap Autocomplete dengan Load Data Dinamis menggunakan PHP Ajax. Dalam tutorial ini, kita akan melihat cara memuat data secara dinamis untuk daftar saran autocomplete, field input Bootstrap Typeahead. Saya menggunakan jQuery AJAX untuk memanggil skrip PHP MySQL untuk membaca data dari database dan autocomplete secara dinamis. Data yang dimuat akan dikembalikan ke sumber script Typeahead untuk mencantumkan saran autocomplete.
Dalam contoh ini, kita akan menyimpan negara-negara dalam tabel database, bukan array Javascript. Sumber dari fungsi typeahead dibaca dan didapat dari database dengan menggunakan jQuery AJAX. Saya menggunakan AJAX untuk menjalankan skrip PHP dengan meneruskan input field Typeahead sebagai parameter kueri untuk memproses SELECT untuk mendapatkan data untuk saran autocomplete.
jQuery AJAX Callback ke Sumber Supply Typeeadead
Skrip jQuery berikut digunakan untuk menginisialisasi fungsi Bootstrap Typeahead untuk menerapkan autocomplete untuk bidang input. Saat mengetik data ke kolom input, nilai dikirim ke skrip PHP sebagai parameter kueri menggunakan metode JQuery AJAX POST. Metode ini menerima respons database dalam format JSON dan digunakan sebagai sumber untuk menampilkan saran pelengkapan otomatis.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <title>Bootstrap Autocomplete with Dynamic Data Load using PHP Ajax</title> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="typeahead.js"></script> </head> <body> <div class="bgcolor"> <label class="demo-label">Search Country:</label><br/> <input type="text" name="txtCountry" id="txtCountry" class="typeahead"/> </div> <script> $(document).ready(function () { $('#txtCountry').typeahead({ source: function (query, result) { $.ajax({ url: "server.php", data: 'query=' + query, dataType: "json", type: "POST", success: function (data) { result($.map(data, function (item) { return item; })); } }); } }); }); </script> </body> </html> |
Berikut CSS untuk HTML di atas,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> .typeahead { border: 2px solid #FFF;border-radius: 4px;padding: 8px 12px;max-width: 300px;min-width: 290px;background: rgba(66, 52, 52, 0.5);color: #FFF;} .tt-menu { width:300px; } ul.typeahead{margin:0px;padding:10px 0px;} ul.typeahead.dropdown-menu li a {padding: 10px !important; border-bottom:#CCC 1px solid;color:#FFF;} ul.typeahead.dropdown-menu li:last-child a { border-bottom:0px !important; } .bgcolor {max-width: 550px;min-width: 290px;max-height:340px;background:url("a.jpg") no-repeat center center;padding: 100px 10px 130px;border-radius:4px;text-align:center;margin:10px; margin: auto;} .demo-label {font-size:1.5em;color: #686868;font-weight: 500;color:#FFF;} .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover { text-decoration: none; background-color: #1f3f41; outline: 0; } </style> |
Data Dinamis menggunakan database
Skrip PHP berikut menerima input Typeahead sebagai parameter permintaan SELECT. Ini akan terikat ke pernyataan kueri untuk mendapatkan nama negara terkait yang dimulai dengan string kueri. Data ini akan dikodekan dalam format JSON dan kembali ke atribut sumber Typehead.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php $keyword = strval($_POST['query']); $search_param = "{$keyword}%"; $conn =new mysqli('localhost:3307', 'dumetschool', 'dumetschool' , 'artikel_mp'); $sql = $conn->prepare("SELECT * FROM country WHERE country_name LIKE ?"); $sql->bind_param("s",$search_param); $sql->execute(); $result = $sql->get_result(); if ($result->num_rows > 0) { while($row = $result->fetch_assoc()) { $countryResult[] = $row["country_name"]; } echo json_encode($countryResult); } $conn->close(); ?> |
Screenshot berikut hasil dari Bootstrap Autocomplete dengan Load Data Dinamis menggunakan PHP Ajax,
Oke itulah tadi pembahasan saya tentang Bootstrap Autocomplete dengan Load Data Dinamis menggunakan PHP Ajax, semoga bermanfaat.