सूची में विकल्पों की संख्या की गणना करें

Question

मैं एक सूची में विकल्पों की संख्या गिनने की कोशिश कर रहा हूं। हालांकि, इनपुट बॉक्स में दर्ज खोज टेक्स्ट के कारण कुछ विकल्प छुपाए गए हैं।

मैंने .size() और। लम्बाई में देखना शुरू कर दिया लेकिन केवल छिपे हुए लोगों की बजाय पूरी सूची प्राप्त नहीं कर रही थी। सरलीकृत करने के लिए, मैंने छुपा विकल्पों को खोजने और खोजने के लिए इसे बदल दिया है (मैं उपयोग कर सकता हूं: बाद में नहीं)।

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

मैंने यह भी कोशिश की है: console.log ($ ('# selContactLists विकल्प: छुपा')); मुझे वह नंबर कभी नहीं मिलता है जिसकी मुझे उम्मीद है। क्या कोई देख सकता है कि मैं कहां गलत हो रहा हूं?

और भी अजीब बात यह है कि अगर मैं चयन के "आकार" को बदलता हूं ताकि डिफ़ॉल्ट रूप से एक से अधिक आइटम दिखाए जा सकें, क्रोम पर यह किसी भी विकल्प को कभी छुपाता नहीं है।

Answer 1

यह मेरे लिए काम करता है, लेकिन आप मैन्युअल रूप से जोड़ सकते हैं और सीएसएस प्रदर्शन निकालना चाहें: तत्वों, बजाय दिखाएँ/छिपाएँ का उपयोग कर, संगतता कारणों के लिए के से कोई भी ...

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

Answer 2

jQuery का :visible चयनकर्ता का उपयोग करें।

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

Answer 3

एक दृष्टिकोण काम करने के लिए लगता है कि, वह इस प्रकार है, हालांकि यह, धोखा देती है, कुछ हद तक,, विकल्प है कि छिपे हुए हैं, और पता चला बताए चर और फिर उन चर के .length संपत्ति का उपयोग करके:

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

कृपया ध्यान दें कि उपरोक्त आपके मूल कोड का एक अपेक्षाकृत बड़ा पुनः लिखना है। मैंने keyup विधि से डीओएम तक पहुंचने की संख्या को कम करने के लिए चयनकर्ताओं के कुछ कैशिंग का उपयोग किया है, और वर्तमान में, .toLowerCase() विधियों के कारण यह एक केस-असंवेदनशील खोज है, और selectedIndex को पहले स्थानांतरित करता है टाइप करते समय select में दिखाया गया था, जबकि छिपाने के लिए one को अनुमति देने के लिए क्रोमियम में यह क्रोमियम में आवश्यक था।