CSS3 खोज

बहुत से शायद jQuery के क्विकचार्ज प्लगइन से परिचित हैं। यह प्लगइन, सभी तत्वों की पूर्व-तैयार सूची और उनके पाठीय प्रतिनिधित्व को छांटता है, इंडेक्सऑफ फ़ंक्शन का उपयोग करके कीवर्ड की उपस्थिति की जांच करता है।

मुझे यह फैसला पसंद नहीं आया। मेरा मानना ​​है कि यह कार्यक्षमता देशी होनी चाहिए।



ऐसा लगता है कि छद्म-वर्ग : सम्‍मिलित () इसके लिए अभिप्रेत था, लेकिन UFO ने आकर मानक में निम्नलिखित को प्रकाशित किया:

6.6.6। रिक्त
यह खंड जानबूझकर खाली छोड़ दिया गया। (यह खंड पहले परिभाषित किया गया था: इसमें () छद्म वर्ग है।)

मुझे एक विकल्प मिला: विशेषता चयनकर्ता [att * = val] । यह आपको एक विकल्प युक्त तत्व के साथ तत्वों का चयन करने की अनुमति देता है (जो कि, संक्षेप में, indexOf का एक एनालॉग है)। इस प्रकार, गतिशील रूप से शैलियों को जोड़ने और हटाने से, हम खोज पूरी तरह से CSS में कर सकते हैं और केवल नियंत्रण तर्क जावास्क्रिप्ट में होगा। ऐसा करने के लिए, हमें पहले से तत्वों के एक पाठीय प्रतिनिधित्व वाले गुण बनाने की आवश्यकता है। यह सर्वर पर किया जा सकता है, या क्लाइंट पर जावास्क्रिप्ट का उपयोग किया जा सकता है।

इस पद्धति के कार्यान्वयन का एक उदाहरण

if (!document.head) document.head = document.getElementsByTagName('head')[0]; var css = document.createElement("style"); document.head.appendChild(css); function search() { var selector = ''; var searchBox = document.getElementById('searchBox'); var keywords = searchBox.value.toLowerCase().split(' ').filter(Boolean); for (var i = 0; i < keywords.length; i++) selector += (i ? ',' : '') + 'div:not([index*="' + keywords[i] + '"])'; if (selector) css.innerHTML = selector + '{display: none;}'; else css.innerHTML = ""; } $(document).ready(function() { $('div').each(function(key, value) { $(value).attr('index', $(this).text().toLowerCase()); }); $("#searchBox").keyup(search); }); 

लाइव डेमो

यह चयनकर्ता सभी आधुनिक ब्राउज़रों (फ़ायरफ़ॉक्स 3+, ओपेरा 9.5+, IE 7+) में समर्थित है।
WebKit ब्राउज़र इस चयनकर्ता का भी समर्थन करते हैं, लेकिन शैलियों को जोड़ने और हटाने के साथ प्रदर्शन समस्याओं के कारण, इस तकनीक का उपयोग करना मुश्किल होगा।

[07.06.2012] अपडेट:
मैंने थोड़ा समय पाया और अपनी पुरानी परियोजनाओं को संशोधित किया।
अपडेटेड लाइव डेमो। अब CSS3 और JavaScript (QuickSearch) में खोज की तुलना की जा रही है।
बहुत उपयोगी टिप्पणी के लिए धन्यवाद ivan386 , इसके लिए धन्यवाद गति को सही ढंग से मापना संभव है।

बैक टू बैक तुलना

पुनश्च: जाहिर है, दोनों विकल्प गति में लगभग एक ही काम करते हैं, जिसकी उम्मीद की जानी थी।