क्रॉस-ब्राउज़र खोज चुनिंदा सूची में

नीचे हम ड्रॉप-डाउन सूची खोज विधि (चयन) के बारे में बात करेंगे।

इसके लिए एक टेक्स्ट इनपुट फ़ील्ड और स्वयं ड्रॉप-डाउन सूची की आवश्यकता होती है:

<input class="type-search" type="text" /> <select size="10" id="list"> <option value="val">Text</option> ... <option value="val*n">Text</option> </select> 

उपयोगकर्ता के लिए खोज परिणाम को अधिक दृश्यमान बनाने के लिए, आपको 10 के मान के साथ आकार विशेषता के साथ चयन टैग सेट करना चाहिए।

इसमें थोड़ी सीएसएस जोड़ें:

 input, select { width: 300px; margin: 10px auto; display: block; } 

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

सूची खोज नियमित अभिव्यक्तियों के उपयोग पर आधारित है, और चूंकि इनपुट फ़ील्ड में मान स्थिर नहीं है, मैं शाब्दिक के बजाय नियमित अभिव्यक्ति ( नए RegExp () ) के ऑब्जेक्ट अभिव्यक्ति का उपयोग करता हूं:

 var field = $('#list').find('option'); //   $('#searchInput').bind('keyup', function() { var q = new RegExp($(this).val(), 'ig'); for (var i = 0, l = field.length; i < l; i += 1) { var option = $(field[i]), parent = option.parent(); if ($(field[i]).text().match(q)) { if (parent.is('span')) { option.show(); parent.replaceWith(option); } } else { if (option.is('option') && (!parent.is('span'))) { option.wrap('<span>').hide(); } } } }); 

यह देखा जा सकता है कि खोज स्वयं कठिन नहीं है: सभी परिणामों को प्रदर्शित करने में रुचि रखते हैं।
तथ्य यह है कि सूची मदों को छिपाने वाले गुणों का सरल अनुप्रयोग हमेशा अपेक्षित परिणाम नहीं देता है।
उदाहरण के लिए, कुछ ब्राउज़रों ( क्रोम , इंटरनेट एक्सप्लोरर ) में, यदि आप केवल प्रदर्शन जोड़ते हैं: विकल्प टैग में से कोई भी नहीं , बाद वाला अभी भी दिखाई देगा।

हालांकि, स्पैन टैग में लिपटे एक ही विकल्प टैग के कानों के साथ एक साधारण फिंट डिस्प्ले को पूरी तरह से समझता है: कोई भी नहीं , और बिल्कुल उम्मीद के मुताबिक व्यवहार करता है।

पुनश्च: यह विधि न तो मान्य है और न ही शब्दार्थिक है, हालाँकि, यह सभी ब्राउज़रों में ठीक काम करता है।

एक उदाहरण है ।