How to reorder a dropdown list (jquery)

Question

I have a dropdown box and a textbox (year). When the user enters something on the textbox, the dropdown box items that startswith(textbox) to be on top.For example, if the user writes (on textbox) 1999, all the listitems that start with 1999 (in alphabetical order) should be on top. Is this possible with jquery?

Thank you

Answer 1

Attach an handler to the change event for the text box that grabs its value, finds all the options that start with that, and remove and prepend them to the beginning of the select list like this:

$('#myTextBox').on('change', function(){

    var $select = ;
    var textBoxValue = $(this).val();

    $('#mySelect option').filter(function(){
        return this.innerHTML.indexOf(textBoxValue) == 0;
    })
        .remove()
        .prependTo($('#mySelect'));
}

Answer 2

Yes, that's possible.. Created the Plnker for your reference..