Hallo rekan rekan Dumenity berjumpa lagi pada tutorial kursuswebprogramming, di panduan kali ini kita akan belajar mengenai Bootstrap Autocomplete dengan Load Data Dinamis menggunakan PHP Ajax. Pada panduan ini, kita akan melihat cara mengandung data secara dinamis bagi daftar saran autocomplete, field input Bootstrap Typeahead. Saya menggunakan jQuery AJAX bagi memanggil skrip PHP MySQL bagi membaca data dari database dan autocomplete secara dinamis. Data yang dimuat akan dikembalikan ke sumber script Typeahead bagi mencantumkan saran autocomplete.
Pada contoh ini, kita akan menyimpan negara-negara pada tabel database, bukan array Javascript. Sumber dari kegunaan typeahead dibaca dan didapat dari database dengan menggunakan jQuery AJAX. Saya menggunakan AJAX bagi menjalankan skrip PHP dengan meneruskan input field Typeahead selaku parameter kueri bagi memproses SELECT bagi memperoleh data bagi saran autocomplete.
jQuery AJAX Callback ke Sumber Supply Typeeadead
Skrip jQuery berikut digunakan bagi menginisialisasi kegunaan Bootstrap Typeahead bagi mengaplikasikan autocomplete bagi bidang input. Ketika mengetik data ke kolom input, nilai dikirim ke skrip PHP selaku parameter kueri menggunakan sistem JQuery AJAX POST. Sistem ini menerima respons database pada format JSON dan digunakan selaku sumber bagi 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 bagi 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: (Visited 23 times, 1 visits today)
|
