जिन साइटों में मुझे सेवा देने का सम्मान है,
उनमें से एक पर ,
चयन को अनुकूलित करने के लिए अद्भुत jQuery प्लगइन
cuSel का उपयोग किया जाता है। यह सुविधाजनक है कि यह कॉन्फ़िगर करने के लिए काफी सरल है और आपको स्क्रॉल बार को भी अनुकूलित करने की अनुमति देता है।
लेकिन कभी-कभी ऐसा होता है कि तत्वों की सूची बहुत बड़ी हो सकती है। और जल्दी से सही आइटम ढूंढना इतना सरल नहीं है।
एक बार मुझे पहले पत्रों द्वारा पाठ और फिल्टर तत्वों को दर्ज करने की क्षमता का एहसास करने का काम मिला। सूची में यूक्रेनी शहरों के नाम शामिल थे और यह काफी लंबा था। चूंकि प्लग-इन में यह सुविधा नहीं थी, और ग्राहक और मैं दोनों सुंदर चयन को नहीं छोड़ना चाहते थे, इसलिए स्क्रिप्ट कोड में छोटे सुधार करने का निर्णय लिया गया।
आज मैं आपके साथ यह सब दोहराने की कोशिश करूंगा। ऐसा करने के लिए, प्लगइन पृष्ठ से
एक डेमो
लें । संग्रह में सभी आवश्यक पुस्तकालय और शैलियाँ शामिल हैं।
Index.html पेज पर, लेखक ने प्लगइन को जोड़ने और उपयोग करने के कई उदाहरण तैयार किए। आइए पहले चयन के लिए फ़िल्टरिंग जोड़ें, जिसमें देशों की सूची है।
पाठ दर्ज करने के लिए, हम एक पारदर्शी पाठ क्षेत्र का उपयोग करेंगे, जिसे चयन पर शीर्ष परत पर क्लिक करके समायोजित किया जाएगा। इस क्षेत्र के लिए संबंधित सीएसएस वर्ग को css
/ cusel.css फ़ाइल में जोड़ें और ब्लॉक के लिए समान आकार सेट करें जिसमें चयनित सूची आइटम का पाठ प्रदर्शित किया गया है।
.cusel .search-field { position: absolute; outline:0; border: 0; background: transparent; display:none; } .cusel .search-field, .cuselText { width: 144px; height: 20px; line-height:20px; padding: 3px 30px 3px 6px; }
केवल आवश्यक चयनों में फ़िल्टरिंग को जोड़ने में सक्षम होने के लिए, हम उन्हें एक अतिरिक्त
फ़िल्टरिंग वर्ग के साथ चिह्नित करेंगे।
<select class="sel80 filtering" id="country" name="country" tabindex="2">
Js / cusel.js फ़ाइल खोलें और
cuselEvents फ़ंक्शन में निम्न कोड जोड़ें।
jQuery(".cusel").each(function () { var itv; var elm = $(this); if (elm.hasClass("filtering") && elm.find(".search-field").length == 0) { var f = $("<input type='text' />") f.addClass("search-field"); f.keydown(function () { clearInterval(itv); var list = elm.find(".cusel-scroll-pane > span"); itv = setInterval(function () { list.each(function () { var item = $(this); item.show(); if (item.text().toLowerCase().indexOf(f.val().toLowerCase()) != 0) item.hide(); }); var d = elm.find(".cusel-scroll-pane").eq(0).attr("id"); jQuery("#" + d)[0].scrollTo(0); clearInterval(itv); }, 100); }); f.click(function () { $(this).val('').hide(); elm.focus(); }); elm.append(f); } });
यह कोड क्या करता है? पृष्ठ पर "क्लास" के साथ सभी तत्वों को ढूँढता है क्योंकि इस वर्ग का उपयोग शैलीगत चयनों में किया जाता है। इसके अलावा, यदि फ़िल्टरिंग क्लास का चयन करने के लिए निर्दिष्ट किया गया है और इसमें खोज-क्षेत्र वर्ग (हमारा पाठ इनपुट फ़ील्ड) वाला बच्चा नहीं है, तो ऐसा फ़ील्ड बनाया जाता है और एक इवेंट हैंडलर उस पर लटका दिया जाता है। हैंडलर, फ़ील्ड में प्रत्येक कीस्ट्रोक के लिए, उस सूची में आइटम ढूंढता है जिसका टेक्स्ट फ़ील्ड में पाठ से मेल नहीं खाता है और बस उन्हें छुपाता है।
अब हमें यह सुनिश्चित करने की आवश्यकता है कि हमारे पारदर्शी क्षेत्र के ऊपर के चयन पर क्लिक करने से यह प्रकट होता है। ऐसा करने के लिए, उसी cuselEvents
फ़ंक्शन में हमें क्लिक इवेंट हैंडलर मिलता है। लेखक की टिप्पणी के साथ चिह्नित कोड का भाग ढूंढना आवश्यक है "यदि वे चयन (पाठ) पर स्वयं क्लिक करते हैं और इसे निम्नानुसार बदलते हैं।"
if((clickedClass.indexOf("cuselText")!=-1 || clickedClass.indexOf("cuselFrameRight")!=-1) && clicked.parent().prop("class").indexOf("classDisCusel")==-1) { var cuselWrap = clicked.parent().find(".cusel-scroll-wrap").eq(0); var parent = clicked.parents(".cusel"); if (parent.hasClass("filtering")) { var txt = parent.children(".cuselText"); var sf = parent.children(".search-field"); if(sf.is(":hidden")) { txt.text(""); sf.show().focus(); } else { txt.text(parent.find(".cuselActive").eq(0).text()); sf.val("").hide(); } } cuselShowList(cuselWrap); }
चूंकि टेक्स्ट इनपुट फ़ील्ड पारदर्शी है, इसलिए पृष्ठभूमि को ओवरलैप नहीं करने के लिए, हम चयन में चयनित तत्व के पाठ को साफ़ करते हैं। बार-बार क्लिक करने पर आइटम अपनी मूल स्थिति में वापस आ जाएगा।
अब हम यह सुनिश्चित करेंगे कि जब आप सूची में किसी आइटम का चयन करते हैं, तो इसके विपरीत क्षेत्र छिपा होता है। नीचे, लेखक की टिप्पणी के साथ चिह्नित ब्लॉक को ढूंढें "यदि आपने सूची में एक स्थिति का चयन किया है" और वहां निम्न कोड जोड़ें
else if(clicked.is(".cusel-scroll-wrap span") && clickedClass.indexOf("cuselActive")==-1) { var parent = clicked.parents(".cusel"); if (parent.hasClass("filtering")) { parent.children(".search-field").val('').hide(); parent.find(".cusel-scroll-pane > span").show(); }
जैसा कि आप देख सकते हैं, हम सूची आइटम को फ़िल्टरिंग के दौरान छिपे हुए दृश्यमान बनाते हैं।
यह तर्कसंगत होगा यदि उपयोगकर्ता पूरी सूची पर क्लिक करता है, सूची को बंद करें और फ़िल्टर फ़ील्ड को छिपाएं। इसलिए, हम लेखक की टिप्पणी द्वारा चिह्नित ब्लॉक के नीचे पाते हैं "खुली सूचियों को छिपाएं यदि वे सूची के बाहर क्लिक करते हैं" और इसे निम्नानुसार बदल दें।
else { var wrap = jQuery(".cusel-scroll-wrap"); var parent = wrap.parents(".cusel"); parent.each(function () { var elm = $(this); if (elm.hasClass("filtering")) { elm.find(".cuselText").text(elm.find(".cuselActive").eq(0).text()); elm.find(".search-field").val('').hide(); elm.find(".cusel-scroll-pane > span").show(); } }); wrap.hide(); parent.removeClass("cuselOpen") }
और अब फिनिशिंग टच।
CuselEvents फ़ंक्शन के बहुत अंत में आपको निम्नलिखित टिप्पणी के साथ चिह्नित कोड का एक टुकड़ा मिलेगा
एलेक्सी का कार्य पहले अक्षर द्वारा उचित मूल्य का चयन करता है। हमें कई पत्रों द्वारा चयन की संभावना का एहसास होता है। इसलिए, संघर्षों से बचने के लिए, एलेक्सी के कोड पर टिप्पणी की जानी चाहिए।
स्रोत कोड