Contare il numero di opzioni in un elenco

Question

Sto cercando di contare il numero di opzioni in un elenco. Tuttavia, alcune delle opzioni sono state nascoste a causa del testo di ricerca inserito in una casella di input.

Ho iniziato a cercare in .size() e .length ma ottenevo solo l'elenco completo anziché quelli che non erano nascosti. Per semplificare, l'ho modificato per cercare e trovare le opzioni nascoste (posso usare: non più tardi).

$('#txtListSearch').keyup(function(evt) { 
    if($(this).val().length < 1) { 
     $('#selContactLists option').show(); 
    } else { 
     $('#selContactLists option:not(:contains("' + $(this).val() + '"))').hide(); 

     if($('#selContactLists').size()) { 
      $('#selContactLists option:contains("' + $(this).val() + '")').first().attr('selected', 'selected');     
     } else { 
     } 
    } 
    console.log($('#selContactLists option').filter(':hidden')); 
}); 

Ho anche provato: console.log ($ ('# selContactLists opzione: hidden')); Non ho mai ottenuto il numero che mi aspetto. Qualcuno può vedere dove sto andando male?

Ancora più strano, è che se cambio la "dimensione" della selezione in modo che venga visualizzato più di un elemento per impostazione predefinita, su Chrome non nasconde mai alcuna delle opzioni.

Answer 1

questo funziona per me, ma si potrebbe desiderare di aggiungere e rimuovere manualmente il display css: nessuno dagli elementi, invece di usare mostra/nascondi, per motivi di compatibilità ...

alert($('#selContactLists option:not([style*=none])').length); 

Answer 2

Utilizzare il selettore di jQuery :visible.

$('#selContactLists option:visible').length; 

Answer 3

Un approccio che sembra funzionare è il seguente, anche se imbroglia, in qualche modo, assegnando le opzioni che sono nascosti, e mostrate, alle variabili e quindi utilizzando la proprietà .length di queste variabili:

$('#txtListSearch').keyup(
    function(e) { 
     var val = $(this).val().toLowerCase(), 
      sel = $('#selContactLists'); 
     if (val.length < 1) { 
      sel.find('option').show(); 
     } 
     else { 
      var shown = sel.find('option').filter(

       function() { 
        return $(this).text().toLowerCase().indexOf(val) !== -1; 
       }).show().first().prop('selected',true), 
       hidden = sel.find('option').filter(

       function() { 
        return $(this).text().toLowerCase().indexOf(val) == -1; 
       }).hide(); 
      console.log(shown.length, hidden.length); 
     } 
    });​ 

JS Fiddle demo.

Si prega di notare che quanto sopra è una riscrittura relativamente grande del codice originale. Ho usato alcuni caching di selettori per ridurre il numero di accessi al DOM dal metodo keyup e, attualmente, a causa dei metodi .toLowerCase() questa è una ricerca non sensibile alla distinzione tra maiuscole e minuscole e sposta lo selectedIndex al primo di le opzioni non nascoste (in Chromium questo sembrava essere necessario per consentire di nascondere one mentre era mostrato nel select durante la digitazione di t).