#JQuery UI

JQuery UI Part 5 : Membuat Form Autocomplete Dengan JQuery UI

By Diki Alfarabi Hadi
9 February 2016
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

<!DOCTYPE html>

<html>

<head>

<title>JQuery UI Part 5 : Membuat Form Autocomplete Dengan JQuery UI</title>

</head>

<body>

<h1>Membuat Form Autocomplete Dengan JQuery UI | www.malasngoding.com</h1>

</div>

</body>

$(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

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).

</div>

dan memberikan fungsi autocomplete pada id tag (form) dengan mengarahkan variabel pemrograman sebagai sumber data nya. variabel pemrograman di buat dalam bentuk array.

$(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.

Referensi source code untuk belajar

Source Code Aplikasi Pengajuan Cuti Karyawan Berbasis Website

See the Pen Membuat Form Autocomplete Dengan JQuery UI by Malas Ngoding (@malasngoding) on CodePen.0

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.