Фильтрация списка выбора через поле ввода & jquery

Question

Мне было интересно, могу ли я получить помощь в фильтрации списка выбора, используя поле ввода через jquery.

Вот как выглядит мой js, но он, похоже, не работает. Я предполагаю, что это связано с тем, что опции в списке выбора не скрыты.

<script type="text/javascript"> 
    $(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(); // Does not work 
       } 
       else 
        $(this).hide(); 
      }); 
     }); 
    }); 
</script> 

и вот мой HTML

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

Answer 1

Пожалуйста, попробуйте следующее:

$("#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); 

    }); 
}); 

Вы можете увидеть его в действии here.

HTH

Answer 2

Попробуйте отключить вместо укрытия.

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

Еще одна вещь, которую вы могли бы сделать - это удалить вариант из DOM в целом.

Answer 3

Нет атрибута text.

попробовать что-то вроде этого:

<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: отредактировал мой ответ, потому что я неправильно Somethings.