Easyautocomplete – Contoh Membuat searching ajax

berikut adalah contoh untuk melakukan input dengan plugin jquery autocomplete. spesifikasi contoh adalah ketika memasukan huruf-huruf halaman akan mengirim request ker server php, dan php memproses query pencarian, kemudian merespon hasil sesuai dengan keyword pencarian.

bagian di head

 

<!-- easeautocomplete -->
 <link href="http://easyautocomplete.com/dist/easy-autocomplete.min.css" rel="stylesheet">
 <link href="http://easyautocomplete.com/dist/easy-autocomplete.themes.min.css" rel="stylesheet">
 < script src="http://easyautocomplete.com/dist/jquery.easy-autocomplete.min.js" >< /script >

form

<input id="pegawai_id" placeholder="" />
 <input id="pegawai_nama" class="form-control input-sm" style="width: 300px" />

jquery

var options = {
 url: function(phrase) {
 return "authorpegawaiajax.php";
 },
 getValue: function(element) {
 return element.nama_lengkap;
 },
 template: {
 type: "description",
 fields: {
 description: "pegawai_id"
 }
 },
 ajaxSettings: {
 dataType: "json",
 method: "POST",
 data: {
 dataType: "json"
 }
 },
 list: {
 onSelectItemEvent: function() {
 var selectedItemValue = $("#pegawai_nama").getSelectedItemData().pegawai_id;
 $("#pegawai_id").val(selectedItemValue).trigger("change");
 },
 onHideListEvent: function() {
 $("#pegawai_id").val("").trigger("change");
 }
 },
 preparePostData: function(data) {
 data.phrase = $("#pegawai_nama").val();
 return data;
 },
 theme: "plate-dark",
 requestDelay: 400
 };

$("#pegawai_nama").easyAutocomplete(options);

JQuery easyautocomplete

easyautocomplete

Pecinta jquery mungkin sudah familiar dengan plugin ini. easyautocomplete, dari namanya sudah terjabarkan easy auto complete, yang artinya mudah otomatis dan lengkap, kalo tidak salah. mudah untuk digunakan dalam pemasangan plugin jquery. yang berfungsi untuk membantu user dalam mengetik kata. kita ketik beberapa huruf otomatis akan muncul saran kata-kata yang mengandung huruf tersebut.

Lebih lengkapnya silahkan kunjungi http://easyautocomplete.com/.
dan untuk contoh-conthnya ada adi http://easyautocomplete.com/examples.

mudah-mudahan bermanfaat. wassalam.