Pada kesempatan kali ini saya ingin menjelaskan tentang Bagaimana Cara Mudah Membuat Autocomplete Menggunakan jQuery, apa sih autocomplete? Autocomplete adalah autocomplete merupakan kemampuan suatu komponen melakukan pencarian dari data yang ada berdasarkan input dari user. (glosarium.org) atau bisa juga pengertiannye seperti ini  Fungsi yang menampilkan perkiraan kata yang akan dimasukkan tanpa harus mengetikkan keseluruhan kata. Fasilitas AutoComplete terdapat pada hampir semua web browser atau aplikasi pengolah kata seperti Microsoft Office.
Contoh sederhananya gini, ketika kita masuk ke halaman form pencarian ketika baru memasukkan beberapa kata sudah terdapat atau sistem sudah menebak apa yang kita cari dan paling banyak orang cari, sederhana seperti itu, gampang yah pasti teman teman pada penasaran yah tentang autocomplete ini ingin segera memulai mengerjakan yah, oke caranya sangat mudah teman teman bisa ikut langkah berikut yah atau langsung saja copykan scriptnya dibawah sini :
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 |
<head> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="https://resources/demos/style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script type="text/javascript"> $(function(){ var provinsi = [ "DKI Jakarta", "Sulawesi Utara", "Kalimantan", "Papua", "Sulawesi Barat", "Kalimantan Barat" ]; $( "#data" ).autocomplete({ source: provinsi }); }); </script> </head> <body> <div class="col-md-8 col-md-offset-3"> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <legend>Form Provinsi</legend> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <div class="ui-widget"> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <label for="data">Provinsi : </label> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <input class="form-control" id="data"> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â </div> Â Â Â Â Â Â Â Â Â Â Â Â </div> </body> |
Jika sudah save dan jalankan, jika berhasil maka tampilannya akan seperti ini, :
cukup mudah bukan? sekian tutorial tentang Cara Mudah Membuat Autocomplete Menggunakan jQuery, sampai bertemu diartikel selanjutnya dan sampai jumpa.
#KeepLearn
#IsmetMA