Disini dalam contoh ini kita menggunakan plugin tokenfield Bootstrap untuk tag ajax autocomplete. tokenfield plugin adalah advanced tagging / tokenizing plugin untuk jQuery dan Twitter Bootstrap dengan fokus pada dukungan keyboard dan copy-paste. Plugin tokenfield juga menyediakan julukan untuk tag autocomplete, Tapi contoh ini saya menggunakan jquery ui untuk ajax autocomplete.
Dalam contoh ini saya menggunakan file berikut untuk css dan js dengan cara itu kita dapat membuat contoh sederhana:
Penggunaan Dasar
1. Buat File Index.php
2. Muat library jQuery dan CSS yang dibutuhkan dan kerangka Bootstrap pada file index.php
<!-- Css Files-->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css">
<!-- JS Files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script>
3. Aktifkan plugin, dan masukan di mana pengguna akan melihat daftar data yang didefinisikan dalam JavaScript pada file index.php
<div class="container">
<input type="text" class="form-control" id="tokenfield" />
</div>
4. Masukkan AJAX di index.php
<script type="text/javascript">
$('#tokenfield').tokenfield({
autocomplete: {
source: function (request, response) {
jQuery.get("exute.php", {
query: request.term
}, function (data) {
data = $.parseJSON(data);
response(data);
});
},
delay: 100
},
showAutocompleteOnFocus: true
});
</script>
5. Buat file exute.php
<?php define (DB_USER, "root"); define (DB_PASSWORD, "root"); define (DB_DATABASE, "test"); define (DB_HOST, "localhost"); $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE); $sql = "SELECT name FROM tags WHERE name LIKE '%".$_GET['query']."%' LIMIT 10"; $result = $mysqli->query($sql); $json = []; while($row = $result->fetch_assoc()){ $json[] = $row['name']; } echo json_encode($json); ?>
Anda bisa mendapatkan informasi lebih lanjut tentang plugin tokenfield bootstrap dari sini: Tokenfield.
Semoga, dari artikel ini bisa membantu teman-teman untuk bisa mengembakan diri.
0 komentar
Berkomentarlah dengan Bahasa yang Relevan dan Sopan.. #ThinkHIGH! ^_^