अपना स्वत: पूर्ण करने वाला खोज बार बनाना आपके विचार से अधिक आसान है।
एक सर्चबार एक लोकप्रिय यूआई तत्व है जिसका उपयोग कई आधुनिक वेबसाइटें करती हैं। यदि आप ऐसी साइट बना रहे हैं जिसमें किसी भी प्रकार का डेटा है, तो हो सकता है कि आप अपने उपयोगकर्ताओं को विशिष्ट आइटम खोजने में सक्षम बनाना चाहें।
ऐसे कई तरीके हैं जिनसे आप एक खोजबार बना सकते हैं। आप जटिल खोजबार बना सकते हैं जो एक नाम या दिनांक जैसे एकाधिक फ़िल्टर के आधार पर परिणाम लौटाते हैं। मौजूदा पुस्तकालय आपको खोजबार को खरोंच से बनाए बिना लागू करने में मदद कर सकते हैं।
हालाँकि, आप वेनिला जावास्क्रिप्ट का उपयोग करके एक साधारण खोज पट्टी भी बना सकते हैं, जो स्ट्रिंग्स की सूची के विरुद्ध उपयोगकर्ता के इनपुट की तुलना करती है।
सर्चबार के लिए यूआई कैसे जोड़ें
आपकी वेबसाइट में एक इनपुट बॉक्स शामिल होना चाहिए ताकि आपके उपयोगकर्ता उस पाठ को दर्ज कर सकें जिसे वे खोजना चाहते हैं। ऐसा करने का एक तरीका एक इनपुट टैग का उपयोग करना है, और इसे सर्चबार की तरह दिखने के लिए स्टाइल करना है।
- अपनी वेबसाइट को स्टोर करने के लिए एक फोल्डर बनाएं। फोल्डर के अंदर, नाम की एक HTML फाइल बनाएं index.html.
- HTML दस्तावेज़ की मूल संरचना के साथ अपनी फ़ाइल को पॉप्युलेट करें। यदि आप HTML से परिचित नहीं हैं, तो बहुत सारे हैं HTML कोड उदाहरण आप सीख सकते हैं आपको गति प्राप्त करने में मदद करने के लिए।
<! doctype html>
<एचटीएमएल लैंग ="एन अमेरिका">
<सिर>
<शीर्षक>खोज पट्टी</title>
</head>
<शरीर>
<डिव क्लास ="CONTAINER">
<!-- वेबपेज की सामग्री यहां जाती है-->
</div>
</body>
</html> - कंटेनर क्लास डिव के अंदर, एक इनपुट टैग जोड़ें। यह उपयोगकर्ता को वह टेक्स्ट टाइप करने की अनुमति देगा जिसे वे खोजना चाहते हैं। जब भी वे एक नया वर्ण दर्ज करते हैं, तो आपकी वेबसाइट खोज () फ़ंक्शन को कॉल करेगी। आप इस फ़ंक्शन को बाद के चरणों में बनाएंगे।
स्वत: पूर्ण विशेषता यह सुनिश्चित करती है कि कोई ब्राउज़र पिछले खोज शब्दों के आधार पर अपना स्वयं का ड्रॉपडाउन नहीं जोड़ेगा।<डिव क्लास ="CONTAINER">
<एच 2>खोज देश</h2>
<इनपुट आईडी ="खोज पट्टी" स्वत: पूर्ण ="बंद" ऑनकीअप ="खोज()" टाइप ="मूलपाठ"
नाम ="खोज" प्लेसहोल्डर ="आप क्या ढूंढ रहे हैं?">
</div> - उसी फ़ोल्डर में आपके index.html फ़ाइल, नामक एक नई CSS फ़ाइल बनाएँ Styles.css.
- संपूर्ण वेबपृष्ठ और खोजबार के लिए फ़ाइल को स्टाइल के साथ आबाद करें:
शरीर {
मार्जिन: 0;
गद्दी: 0;
पृष्ठभूमि का रंग: #f7f7f7;
}
* {
फुहारा परिवार: "एरियल", सान्स सेरिफ़;
}
कंटेनर {
पैडिंग: 100px 25%;
डिस्प्ले: फ्लेक्स;
फ्लेक्स-दिशा: स्तंभ;
रेखा-ऊँचाई: 2रेम;
फ़ॉन्ट आकार: 1.2em;
रंग: #202C39;
}
#खोज पट्टी {
पैडिंग: 15 पीएक्स;
सीमा-त्रिज्या: 5px;
}
इनपुट[प्रकार = पाठ] {
-webkit-संक्रमण: चौड़ाई 0.15sआसानी से बाहर;
संक्रमण: चौड़ाई 0.15sआसानी से बाहर;
} - में index.html, अपनी CSS फ़ाइल में हेड टैग के अंदर और टाइटल टैग के नीचे एक लिंक जोड़ें:
<लिंक रिले ="शैली पत्रक" href="Styles.css"> - खोलें index.html एक वेब ब्राउज़र में फ़ाइल करें, और अपने सर्चबार का UI देखें।
सर्चबार के लिए लिस्ट स्ट्रिंग कैसे बनाएं
इससे पहले कि उपयोगकर्ता खोज कर सके, आपको उन उपलब्ध वस्तुओं की एक सूची बनानी होगी जिन्हें वे खोज सकते हैं। आप इसे स्ट्रिंग्स की एक सरणी के साथ कर सकते हैं। एक स्ट्रिंग कई में से एक है डेटा प्रकार जिनका आप जावास्क्रिप्ट में उपयोग कर सकते हैं, और वर्णों के अनुक्रम का प्रतिनिधित्व कर सकता है।
आप गतिशील रूप से जावास्क्रिप्ट का उपयोग करके इस सूची को बना सकते हैं, क्योंकि पृष्ठ लोड हो रहा है।
- अंदर index.html, इनपुट टैग के नीचे, एक div जोड़ें। यह div एक ड्रॉपडाउन प्रदर्शित करेगा जिसमें उन आइटम्स की एक सूची होगी जो उपयोगकर्ता द्वारा खोजी जा रही चीज़ों से मेल खाते हैं:
<डिव आईडी ="सूची"></div> - उसी फ़ोल्डर में आपके index.html फ़ाइल और Styles.css फ़ाइल, नामक एक नई फ़ाइल बनाएँ स्क्रिप्ट.जेएस.
- अंदर स्क्रिप्ट.जेएस, loadSearchData() नामक एक नया फ़ंक्शन बनाएं। फ़ंक्शन के अंदर, स्ट्रिंग्स की सूची के साथ एक ऐरे को इनिशियलाइज़ करें। ध्यान रखें कि यह एक छोटी स्थिर सूची है। बड़े डेटासेट के माध्यम से खोज करने पर अधिक जटिल कार्यान्वयन को ध्यान में रखना होगा।
समारोहलोडसर्चडाटा() {
// सर्चबार में उपयोग किया जाने वाला डेटा
होने देना देश = [
'ऑस्ट्रेलिया',
'ऑस्ट्रिया',
'ब्राज़िल',
'कनाडा',
'डेनमार्क',
'मिस्र',
'फ्रांस',
'जर्मनी',
'अमेरीका',
'वियतनाम'
];
} - LoadSearchData() के अंदर और नई सरणी के नीचे, div तत्व प्राप्त करें जो उपयोगकर्ता को मेल खाने वाले खोज आइटम प्रदर्शित करेगा। सूची div के अंदर, सूची में प्रत्येक डेटा आइटम के लिए एंकर टैग जोड़ें:
// सूची का HTML तत्व प्राप्त करें
होने देना सूची = दस्तावेज़.getElementById ('सूची');
// प्रत्येक डेटा आइटम को एक के रूप में जोड़ें उपनाम
देशों।प्रत्येक के लिए((देश) => {
होने देना एक = दस्तावेज़.क्रिएट एलिमेंट ("ए");
a.innerText = देश;
a.classList.add ("सामग्री सूचीबद्ध करें");
सूची.appendChild (ए);
}) - के बॉडी टैग में index.html, नए loadSearchData() फ़ंक्शन को कॉल करने के लिए ऑनलोड ईवेंट विशेषता जोड़ें। पेज लोड होने पर यह डेटा लोड करेगा।
<शरीर भार ="लोडसर्चडाटा ()"> - में index.html, बॉडी टैग समाप्त होने से पहले, अपनी JavaScript फ़ाइल से लिंक करने के लिए एक स्क्रिप्ट टैग जोड़ें:
<शरीर भार ="लोडसर्चडाटा ()">
<!-- आपकी वेबपेज सामग्री -->
<स्क्रिप्ट src="स्क्रिप्ट.जेएस"></script>
</body> - में Styles.css, ड्रॉपडाउन सूची में कुछ शैली जोड़ें:
#सूची {
बॉर्डर: 1px सॉलिड लाइटग्रे;
सीमा-त्रिज्या: 5px;
प्रदर्शन क्षेत्र;
}
।सामग्री सूचीबद्ध करें {
डिस्प्ले: फ्लेक्स;
फ्लेक्स-दिशा: स्तंभ;
पाठ-सजावट: कोई नहीं;
पैडिंग: 5px 20px;
रंग काला;
}
।सामग्री सूचीबद्ध करें: होवर {
पृष्ठभूमि-रंग: हल्का भूरा;
} - खुला index.html अपनी खोज पट्टी और उपलब्ध खोज परिणामों की सूची देखने के लिए वेब ब्राउज़र में। खोज कार्यक्षमता अभी तक काम नहीं करती है, लेकिन आपको वह UI देखना चाहिए जिसका वह उपयोग करेगा:
सर्चबार के भीतर मिलान परिणामों के साथ ड्रॉपडाउन कैसे बनाएं
अब जब आपके पास एक खोजबार और उपयोगकर्ताओं द्वारा खोजे जाने वाले स्ट्रिंग्स की एक सूची है, तो आप खोज कार्यक्षमता जोड़ सकते हैं। जैसे ही उपयोगकर्ता खोजबार में टाइप करता है, सूची में केवल कुछ आइटम ही प्रदर्शित होंगे।
- में Styles.css, डिफ़ॉल्ट रूप से सूची को छिपाने के लिए सूची की शैली बदलें:
#सूची {
बॉर्डर: 1px सॉलिड लाइटग्रे;
सीमा-त्रिज्या: 5px;
कुछ भी डिस्प्ले मत करो;
} - में स्क्रिप्ट.जेएस, खोज () नामक एक नया फ़ंक्शन बनाएं। ध्यान रखें कि जब भी उपयोगकर्ता सर्च बार में किसी वर्ण को दर्ज करता है या हटाता है, तो प्रोग्राम हर बार इस फ़ंक्शन को कॉल करेगा। जानकारी प्राप्त करने के लिए कुछ एप्लिकेशन को सर्वर पर जाने की आवश्यकता होगी। ऐसे मामलों में, यह क्रियान्वयन आपके UI को धीमा कर सकता है। इसे ध्यान में रखने के लिए आपको कार्यान्वयन को संशोधित करने की आवश्यकता हो सकती है।
समारोहखोज() {
// खोज कार्यक्षमता यहां जाती है
} - खोज () फ़ंक्शन के अंदर, सूची के लिए HTML div तत्व प्राप्त करें। सूची के अंदर प्रत्येक आइटम के HTML एंकर टैग तत्व भी प्राप्त करें:
होने देना सूची कंटेनर = दस्तावेज़.getElementById ('सूची');
होने देना सूची आइटम = दस्तावेज़.getElementsByClassName ('listItem'); - उपयोगकर्ता द्वारा खोजबार में दर्ज किया गया इनपुट प्राप्त करें:
होने देना इनपुट = दस्तावेज़.getElementById('सर्चबार').मान
इनपुट = इनपुट। लोअरकेस (); - सूची में प्रत्येक आइटम के लिए उपयोगकर्ता के इनपुट की तुलना करें। उदाहरण के लिए, यदि उपयोगकर्ता "ए" में प्रवेश करता है, तो फ़ंक्शन तुलना करेगा कि "ए" "ऑस्ट्रेलिया" के अंदर है, फिर "ऑस्ट्रिया", "ब्राज़ील", "कनाडा", और इसी तरह। यदि यह मेल खाता है, तो यह उस आइटम को सूची में प्रदर्शित करेगा। यदि यह मेल नहीं खाता है, तो यह उस वस्तु को छुपा देगा।
होने देना कोई परिणाम नहीं = सत्य;
के लिए (मैं = 0; मैं < सूचीआइटम.लंबाई; मैं++) {
if (!listItems[i].innerHTML.toLowerCase().includes (इनपुट) || इनपुट "") {
सूचीआइटम [i] .style.display="कोई नहीं";
जारी रखना;
}
अन्य {
सूचीआइटम [i] .style.display="मोड़ना";
कोई परिणाम नहीं = असत्य;
}
} - यदि सूची में कोई परिणाम नहीं है, तो सूची को पूरी तरह से छुपा दें:
listContainer.style.display = कोई परिणाम नहीं? "कोई नहीं": "अवरोध पैदा करना"; - पर क्लिक करें index.html इसे वेब ब्राउज़र में खोलने के लिए फ़ाइल।
- सर्चबार में टाइप करना शुरू करें। जैसे ही आप लिखते हैं, परिणामों की सूची केवल मिलते-जुलते परिणाम प्रदर्शित करने के लिए अपडेट हो जाएगी।
मेल खाने वाले परिणामों को खोजने के लिए सर्चबार का उपयोग करना
अब जब आप जानते हैं कि स्ट्रिंग चयन के साथ सर्चबार कैसे बनाया जाता है, तो आप अधिक कार्यक्षमता जोड़ सकते हैं।
उदाहरण के लिए, उपयोगकर्ता द्वारा क्लिक किए जाने वाले परिणाम के आधार पर आप विभिन्न पृष्ठों को खोलने के लिए अपने एंकर टैग में लिंक जोड़ सकते हैं। अधिक जटिल वस्तुओं के माध्यम से खोजने के लिए आप अपना खोजबार बदल सकते हैं। आप रिएक्ट जैसे फ्रेमवर्क के साथ काम करने के लिए कोड को संशोधित भी कर सकते हैं।
