Filtering a select list via input box & jquery

Question

I was wondering if i could get some help with filtering a select list using an input box via jquery.

Here\'s what my js looks like, but it doesnt seem to work. I\'m gues

Answer 1

Please try this:

$("#inputFilter").change(function() {
    var filter = $(this).val();
    //alert(filter);
    $("#selectList option").each(function() {
        var match = $(this).text().search(new RegExp(filter, "i"));
        //alert(match);
        if (match < 0 && $(this).text() != "--select--")  {                   
            $(this).attr("disabled",true);
        }
        else
            $(this).attr("disabled",false);

    });
});

You can see it in action here.

HTH

Answer 2

Try disabling instead of hiding.

$(this).attr('disabled', 'disabled');

Another thing you could do is delete the option from the DOM altogether.

Answer 3

There's no text attribute.

Try something like this:

<input id="inputFilter" />
<select id="selectList">
   <option value="1111">1111 - London</option>
   <option value="1112">1111 - Paris</option>
</select>

<script>
$(document).ready(function() {
   $("#inputFilter").change(function() {
      var filter = $(this).val();
      $("#selectList option").each(function() {
         var match = $(this).text().search(new RegExp(filter, 'i'));

         if (match > 0) {
            $(this).show();
         }
         else{
            $(this).hide();
         }
      });
   });
});
</script>

Edit: edited my answer because I misread somethings.