CODEWITHSUNDEEP
javascriptjquery-chosen
AaronBastian
AaronBastian

Reputation: 307

jQuery chosen dropdown search functionality without the search box

Is there a way to leave the search box disabled but still have the dropdown select an option on keypress which is the default behavior while the search is enabled?

$(element).chosen({ disable_search: true });

I have tried enabling the search and hiding the search box (with no luck) using:

$('ul.chosen-choices li.search-field').hide();

it seems as if that search needs to be displayed for the keypress to work like a normal select. Has anyone had any luck? Thanks in advance!

Upvotes: 0

Views: 2363

Answers (1)

Tomasz Rozmus
Tomasz Rozmus

Reputation: 1656

This one works for me, however it needs some adjustments for special character handling:

var originalObjectSelector = "select#yourSelectId";

var $container = $(originalObjectSelector).data("chosen").container

var $orig=$(originalObjectSelector);

$container.bind("keypress", function(event){
    var charCode = event.charCode; 
    var keyCode = event.keyCode; 
    var character = String.fromCharCode(charCode);
    //console.log("kc:", keyCode, "cc", charCode, "char:", character);
    //console.log(event);
    if(keyCode==13){
        //enter is pressed;
        $orig.trigger('change');
    }
    if(charCode != 0 && character.match(/^[-_ a-zA-Z0-9]+$/))
    {
        //console.log('alphanumeric or space');      
        $orig.find("option").removeAttr("selected")
            .filter(function() { return $(this).text().toLowerCase().indexOf(character.toLowerCase()) === 0; })
            .first().attr("selected", "selected");
        $orig.trigger('chosen:updated');
    } 

});

Upvotes: 2

Related Questions