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);
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s