Membuat Autofill Autocomplete Dan Autoselected Dengan Ajax Jquery [PDF]

Citation preview

---

MEMBUAT AUTOFILL, AUTOSELECT, AUTOCOMPLETE DENGAN AJAX DAN JQUERY



AUTOFILL : “Inputan



otomatis terisi berdasarkan nomor unik seperti NIM, NIK, ID atau



nomor unik lainnya”.



Langkah 1 : pergunakan database dengan nama crud_jqueryajax dengan tabel users. Langkah 2 : buat folder dengan nama ajax_autofill di xampp\htdocs dengan susunan sebagai berikut :



Langkah 3 : buat file formautofill.php dengan source code sebagai berikut :



Belajar Autofill

ID
NAMA
EMAIL
ALAMAT

Langkah 4 : buat file ajax.php dengan source code sebagai berikut :



Setelah selesai silahkan anda jalankan pada browser dengan mengakses http://localhost:8080/ajax_autofill/formautofill.php, sehingga akan muncul hasil sebagai berikut :



AUTOCOMPLETE :



“autocomplete/autosuggest pada textbox menggunakan Ajax yang mengambil datanya dari database MySQL. Seperti saat kita ingin melakukan pencarian pada google maka akan muncul kata sugesti setiap kita mengetikkan 1. Kali ini kita hanya menggunakan Ajax”. Langkah 1 : pergunakan database dengan nama crud_jqueryajax dengan tabel users. Langkah 2 : buat folder dengan nama ajax_autocomplete di xampp\htdocs dengan susunan sebagai berikut :



Langkah 3 : buat file index.php dengan source code sebagai berikut :







Ajax Autocomplete











LP3I Kampus Depok



Ajax Autocomplete pada Textbox Menggunakan Ajax



Nama User







© Copyright : LP3I Jakarta







Langkah 4 : buat file ajax_autocomplete.js dengan source code sebagai berikut : $(document).ready(function(){ $('#provinsi').keyup(function(){ var query = $(this).val(); if(query != '') { $.ajax({ url:"search.php", method:"POST", data:{query:query}, success:function(data) { $('#provinsiList').fadeIn(); $('#userList').html(data); } }); } }); $(document).on('click', 'li', function(){ $('#nama').val($(this).text()); $('#userList').fadeOut(); }); }); Langkah 5 : buat file koneksi.php dengan source code sebagai berikut :



Langkah 6 : buat file search.php dengan source code sebagai berikut :



Setelah selesai silahkan anda jalankan pada browser dengan mengakses http://localhost:8080/ajax_autocomplete, sehingga akan muncul hasil sebagai berikut :



AUTOSELECTED : “Menampilkan data otomatis terisi berdasarkan nomor unik atau kunci tertentu”



Langkah 1 : tambahkan tabel berikut pada database crud_jqueryajax : Isilah tabel propinsi dengan data sebagai berikut :



Isi Tabel Kota dengan data sebagai berikut :



Langkah 2 : buat folder dengan nama ajax_autoselected di xampp\htdocs dengan susunan sebagai berikut :



Langkah 3 : buat file index.php dengan source code sebagai berikut :







LP3I Kampus Depok



Ajax Combobox Selected Bertingkat



Provinsi



Pilih Provinsi



Kabupaten/Kota















© Copyright : LP3I Jakarta



Langkah 4 : buat file ajax_autoselected.js dengan source code sebagai berikut : $(document).ready(function(){ $.ajax({ type: 'POST', url: "get_propinsi.php", cache: false, success: function(msg){ $("#provinsi").html(msg); } }); $("#provinsi").change(function(){ var provinsi = $("#provinsi").val(); $.ajax({ type: 'POST', url: "get_kabupaten.php", data: {provinsi: provinsi}, cache: false, success: function(msg){ $("#kabupaten").html(msg); } }); }); });



Langkah 5 : buat file get_propinsi.php dengan source code sebagai berikut :



Langkah 6 : buat file get_kabupaten.php dengan source code sebagai berikut :



Langkah 7 : buat file koneksi.php dengan source code sebagai berikut :



Setelah selesai silahkan anda jalankan pada browser dengan mengakses http://localhost:8080/ajax_autoselected, sehingga akan muncul hasil sebagai berikut :



SELAMAT MENCOBA