Tutorial Multiple Select dengan Jquery Auto Complete

Posted on


jquery2Mari Kita lanjutkan Masala Jquery… kali ini kita membahas bagaimana membuat multiple data pada suatu kolom atau Multiple Select ,nah untuk Auto Complete akan bekerja saat kita mengetikan huruf pada kolom yang kita beri fungsi auto complete. cara kerjanya ketika kita inputkan huruf maka auto complete akan bekerja dan setelah kita memilih salah satu data maka si Multiple select akan memberikan tanda (  ,  )  koma . kira kira gitulah proses kerja nya hehehehe….

langsung saja kita coba dan sekarang buka editor kesayangan kita kemudian ketikan code berikut:

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Belajar jQuery UI Autocomplete – Multiple values</title>
<link rel=”stylesheet” href=”//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css”>
//code.jquery.com/jquery-1.10.2.js
//code.jquery.com/ui/1.11.4/jquery-ui.js
<link rel=”stylesheet” href=”/resources/demos/style.css”>

$(function() {
var RokanMultiple = [
“ActionScript”,
“AppleScript”,
“Asp”,
“BASIC”,
“C”,
“C++”,
“Clojure”,
“COBOL”,
“ColdFusion”,
“Erlang”,
“Fortran”,
“Groovy”,
“Haskell”,
“Java”,
“JavaScript”,
“Lisp”,
“Perl”,
“PHP”,
“Python”,
“Ruby”,
“Scala”,
“Scheme”
];
//Membuat Fungsi Tanda (,)
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}

$( “#Rokan” )
// don’t navigate away from the field on tab when selecting an item
.bind( “keydown”, function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).autocomplete( “instance” ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
// Mendeklarasikan Auto Complete
response( $.ui.autocomplete.filter(
RokanMultiple, extractLast( request.term ) ) );
},
focus: function() {
// Membatasi Nilai Fokus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// Menghapus Inputan yang ada
terms.pop();
// Menambahkan data yang di Select
terms.push( ui.item.value );
// menambahkan  placeholder Untuk Medapatkan koma
terms.push( “” );
this.value = terms.join( “, ” );
return false;
}
});
});

</head>
<body>

Pilih Bahasa Pemograman Yang Kamu Sukai:

</body>
</html>

Setelah selesai coding simpan dengan nama coba.php kemudian buka di browser dan selesai.

terimakasih …

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s