JQuery UI Part 5 : Membuat Form Autocomplete Dengan JQuery UI

Membuat Form Autocomplete Dengan JQuery UI – sudah sampai pada tutorial jquery UI ke 5. di tutorial ini kita akan membahas tentang cara membuat form autocomplete dengan jquery ui. apa itu form autocomplete ? pasti teman-teman sudah sering mendengar. form autocomplete adalah form yang memunculkan suggest pada saat keyword di ketikkan pada form input. biar gak bingung langsung saja kita masuk ke tutorial jquery ui part 5 di www.malasngoding.com yang akan membahas tentang cara membuat form autocomplete dengan mudah menggunakan library jquery ui yang sudah menyediakan fungsi khusus untuk membuat autocomplete. Membuat Form Autocomplete Dengan JQuery UI
Baca juga tutorial jquery ui sebelumnya:
Membuat Form Autocomplete Dengan JQuery UI
JQuery UI menyediakan sebuah fungsi khusus untuk membuat autocomplete. yaitu autocomplete(). untuk cara penggunaannya langsung saja kita masuk ke contoh cara membuat autocomplete dengan jquery ui berikut ini.
autocomplete.html
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 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html> <head> <title>JQuery UI Part 5 : Membuat Form Autocomplete Dengan JQuery UI</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="js/jquery-ui/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Membuat Form Autocomplete Dengan JQuery UI | www.malasngoding.com</h1> <div class="ui-widget"> <label for="tag">Tags: </label> <input id="tag"> </div> </body> <script type="text/javascript"> $(document).ready(function(){ var pemrograman = [ "HTML", "CSS", "PHP", "Javascript", "Framework codeigniter", "Framework Yii", "Framework Laravel", "Framework Ionic", "Java", "C", "C++", "Python", "Ruby" ]; $( "#tag" ).autocomplete({ source: pemrograman }); }); </script> </html> |
style.css
1 2 3 4 5 6 7 |
body{ font-family: sans-serif; } h1{ text-align: center; } |

membuat form autocomplete dengan jquery ui
bisa teman-teman lihat pada gambar di atas. autocomplete pun sudah jadi. suggest akan muncul sesuai denga keyword yang kita ketikkan. data source nya di ambil dari table pemrograman. jadi akan saya jelaskan sedikit di sini teknik membuat autocomplete dengan jquery ui. pertama kita membuat form dan memberikan class atau id. di sini saya memberikan id dengan nama tag (#tag).
1 2 3 4 |
<div class="ui-widget"> <label for="tag">Tags: </label> <input id="tag"> </div> |
dan memberikan fungsi autocomplete pada id tag (form) dengan mengarahkan variabel pemrograman sebagai sumber data nya. variabel pemrograman di buat dalam bentuk array.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script type="text/javascript"> $(document).ready(function(){ var pemrograman = [ "HTML", "CSS", "PHP", "Javascript", "Framework codeigniter", "Framework Yii", "Framework Laravel", "Framework Ionic", "Java", "C", "C++", "Python", "Ruby" ]; $( "#tag" ).autocomplete({ source: pemrograman }); }); </script> |
dan form autocomplete pun selesai di buat. jika teman-teman ada yang kurang mengerti dengan penjelasan berikut ini teman-teman bisa meninggalkan komentar di bawah artikel tutorial membuat form autocomplete ini. sekian lah tutorial membuat form autocomplete semoga dapat menambah wawasan dan berguna. untuk optimasi lainnya dari autocomplete jquery ui ini dapat teman-teman pelajari lebih lanjut di situs resminya yang menyediakan panduan membuat widget autocomplete jquery ui.
See the Pen Membuat Form Autocomplete Dengan JQuery UI by Malas Ngoding (@malasngoding) on CodePen.0
Tutorial Menarik Lainnya

JQuery UI Part 15 : Interaksi Selectable dan Sortable di JQuery UI

JQuery UI Part 14 : Membuat Resizable Dengan JQuery UI

JQuery Part 13 : Membuat Interaksi Droppable Dengan JQuery UI
