Policz liczbę opcji na liście

Question

Próbuję policzyć liczbę opcji na liście. Niektóre opcje zostały jednak ukryte z powodu wpisania tekstu do pola wprowadzania.

Zacząłem patrząc .size() i .length ale tylko coraz pełną listę aniżeli te, które nie zostały ukryte. Aby uprościć, zmieniłem go, aby spróbować znaleźć ukryte opcje (mogę użyć: nie później).

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

Próbowałem również: console.log ($ ('# selContactLists opcja: hidden')); Nigdy nie dostaję liczby, której się spodziewam. Czy ktoś może zobaczyć, gdzie idę źle?

Jeszcze bardziej dziwne jest to, że jeśli zmienię „wielkość” select tak, że więcej niż jeden element jest domyślnie wyświetlane na chromie nie ukrywa żadnej z opcji.

Answer 1

Działa to dla mnie, ale może chcesz ręcznie dodawać i usuwać wyświetlacz css: żaden z elementów, zamiast korzystania pokazać/ukryć, ze względu na kompatybilność ...

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

Answer 2

Użyj selektora jQuery's :visible.

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

Answer 3

Jedno podejście, które wydaje się działać jest następujący, choć zdradza, nieco, przypisując opcje, które są ukryte i widoczne, do zmiennych, a następnie za pomocą właściwości .length tych zmiennych:

$('#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.

Należy pamiętać, że powyższe jest stosunkowo dużym ponownym zapisaniem oryginalnego kodu. Użyłem trochę buforowanie selektorów, aby zmniejszyć liczbę razy DOM jest dostępne od wewnątrz metody keyup, a obecnie, z powodu metod .toLowerCase() to poszukiwanie wielkości liter, a także przesuwa selectedIndex do pierwszego niewidoczne opcje (w Chromium to wydawało się być wymagane, aby umożliwić ukrycie one, gdy zostało to pokazane w select podczas pisania t).