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! 😉

    Published by Eric Gunawan

    Happiness Engineer. WordPress Ambassador. Remote Worker. Soccer News Follower. Movie Lover. Proud Father. Lucky Husband.

    2 thoughts on “jQuery Combobox

    1. setelah ak telusuri di web site jquery ternyata harus download librarynya dll. dan alhasil combobox autocomplete bisa running akan tetapi list datanya kok garisnya memanjang ke samping ya….

    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 )

    Google photo

    You are commenting using your Google 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 )

    Connecting to %s

    %d bloggers like this: