Cuenta el número de opciones en una lista

Question

Estoy tratando de contar el número de opciones en una lista. Sin embargo, algunas de las opciones se han ocultado debido al texto de búsqueda ingresado en un cuadro de entrada.

Comencé a buscar en .size() y .length pero solo obtenía la lista completa en lugar de las que no estaban ocultas. Para simplificar, lo he cambiado para tratar de encontrar las opciones ocultas (puedo usar: no más tarde).

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

También he intentado: console.log ('opción # selContactLists: oculto' $()); Nunca consigo el número que estoy esperando. ¿Alguien puede ver dónde me estoy equivocando?

Aún más extraño, es que si cambio el "tamaño" de la selección para que se muestre más de un elemento por defecto, en cromo nunca oculta ninguna de las opciones.

Answer 1

Esto funciona para mí, pero es posible que desee agregar y quitar manualmente la pantalla css: ninguno de los elementos, en lugar de utilizar mostrar/ocultar, por razones de compatibilidad ...

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

Answer 2

Use el selector :visible de jQuery.

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

Answer 3

Un enfoque que parece que funciona es la siguiente, a pesar de que hace trampa, en cierta medida, mediante la asignación de las opciones que están ocultos, y se muestra, para las variables y luego mediante la propiedad .length de esas variables:

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

Tenga en cuenta que lo anterior es una reescritura relativamente grande de su código original. He usado algunos caché de selectores para reducir el número de veces que se accede al DOM desde el método keyup y, actualmente, debido a los métodos .toLowerCase(), esta es una búsqueda que no distingue entre mayúsculas y minúsculas, y también cambia el selectedIndex al primero de las opciones no ocultas (en Chromium esto parecía ser necesario para permitir que one se oculte mientras se mostraba en el select mientras se escribe t).