Filtrage d'une liste de sélection par zone de saisie et jquery

Question

Je me demandais si je pouvais obtenir de l'aide à filtrer une liste de sélection à l'aide d'une boîte d'entrée via jquery.

Voici ce que mes js ressemble, mais il ne semble pas fonctionner. Je suppose que c'est parce que les options dans une liste de sélection ne sont pas masquables.

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

et voici mon html

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

Answer 1

S'il vous plaît essayez ceci:

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

    }); 
}); 

Vous pouvez le voir en action here.

HTH

Answer 2

Essayez de désactiver au lieu de se cacher.

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

Une autre chose que vous pourriez faire est de supprimer complètement l'option du DOM.

Answer 3

Il n'y a pas text attribut.

Essayez quelque chose comme ceci:

<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: modifié ma réponse parce que je mal lu somethings.