Mari 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"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(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; } }); }); </script> </head> <body> <div class="kolom"> <label for="Rokan">Pilih Bahasa Pemograman Yang Kamu Sukai: </label> <input id="Rokan" size="50"> </div> </body> </html> Setelah selesai coding simpan dengan nama coba.php kemudian buka di browser dan selesai. terimakasih ...
EmoticonEmoticon