jQuery Combobox

Seringkali komponen yang ada di desktop tidak kita dapati di web (HTML). Padahal komponen tersebut sangat berguna dan kita butuhkan. Contohnya adalah combobox. Untungnya JQueryUI menyediakan widget autocomplete yang bisa dimodifikasi menjadi combobox. Berikut ini script/plugin yang dibutuhkan agar kita bisa memakai komponen combobox di halaman web kita.

[js]
$.widget( “ui.combobox”, {
_create: function() {
var self = this;
var select = this.element.hide(),
selected = select.children( “:selected” ),
value = selected.val() ? selected.text() : “”;
var input = $( “” )
.insertAfter( select )
.val( value )
.autocomplete({
delay: 0,
minLength: 0,
source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), “i” );
response( select.children( “option” ).map(function() {
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text.replace(
new RegExp(
“(?![^&;]+;)(?!<[^]*)(” +
$.ui.autocomplete.escapeRegex(request.term) +
“)(?![^]*>)(?![^&;]+;)”, “gi”
), “$1” ),
value: text,
option: this
};
}) );
},
select: function( event, ui ) {
ui.item.option.selected = true;
//select.val( ui.item.option.value );
self._trigger( “selected”, event, {
item: ui.item.option
});
},
change: function( event, ui ) {
if ( !ui.item ) {
var matcher = new RegExp( “^” + $.ui.autocomplete.escapeRegex( $(this).val() ) + “$”, “i” ),
valid = false;
select.children( “option” ).each(function() {
if ( this.value.match( matcher ) ) {
this.selected = valid = true;
return false;
}
});
if ( !valid ) {
// remove invalid value, as it didn’t match anything
$( this ).val( “” );
select.val( “” );
return false;
}
}
}
})
.addClass( “ui-widget ui-widget-content ui-corner-left” );

input.data( “autocomplete” )._renderItem = function( ul, item ) {
return $( “

” )
.data( “item.autocomplete”, item )
.append( “” + item.label + “” )
.appendTo( ul );
};

$( ” ” )
.attr( “tabIndex”, -1 )
.attr( “title”, “Show All Items” )
.insertAfter( input )
.button({
icons: {
primary: “ui-icon-triangle-1-s”
},
text: false
})
.removeClass( “ui-corner-all” )
.addClass( “ui-corner-right ui-button-icon” )
.click(function() {
// close if already visible
if ( input.autocomplete( “widget” ).is( “:visible” ) ) {
input.autocomplete( “close” );
return;
}

// pass empty string as value to search for, displaying all results
input.autocomplete( “search”, “” );
input.focus();
});
}
});
[/js]

Simpan script di atas dengan nama combobox.js. Selanjutnya tinggal kita panggil dari halaman HTML/web kita:

[html]
http://s/combobox.js
[/html]

Sedangkan untuk cara pemakaiannya, siapkan dulu drop-down-list-nya dengan menggunakan komponen select dari HTML. Misalnya:

[html]

BCA
Mandiri
BNI
BRI
CIMB

[/html]

Jangan lupa, file jquery.js juga harus ada di sistem kita. Selanjutnya, komponen select di atas kita ‘sulap’ menjadi combobox dengan script berikut ini.

[js]
$(“#bank”).combobox();
[/js]

Dan, voila ! Combobox kita pun siap disajikan 😀

Tips terakhir, jika Anda menemui sesuatu yang “aneh” pada tampilan combobox Anda, coba tambahkan script berikut ini di file .css Anda:

[css]
.ui-button { margin-left: -1px; }
.ui-button-icon-only .ui-button-text { padding: 0.35em; }
.ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; }
[/css]

Jangan tanya apa maksud dari .css di atas. Karena masih bingung juga kenapa harus ditambah seperti itu 😳

Bagi yang ingin melihat penjelasan/maksud dari script combobox.js di atas, bisa langsung lihat ke sini. Jangan lupa untuk mampir di demo combobox JQueryUI di situs asalnya. Siapa tahu ada update terbaru dari versi terakhir.

Selamat mencoba! 😉