प्रतिक्रिया के साथ टाइप करते समय खोज परिणामों को कैसे फ़िल्टर करें

खोज बार उपयोगकर्ताओं को आपकी वेबसाइट पर जो चाहिए उसे ढूंढने में सहायता करने का एक शानदार तरीका है। यदि आप इस बात पर नज़र रखते हैं कि आपके विज़िटर क्या खोज रहे हैं, तो वे एनालिटिक्स के लिए भी अच्छे हैं।

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

सर्च बार बनाना

खोज एक उपयोगकर्ता से इनपुट लेगी और फ़िल्टरिंग फ़ंक्शन को ट्रिगर करेगी। तुम कर सकते हो रिएक्ट में फॉर्म बनाने के लिए फॉर्मिक जैसी लाइब्रेरी का उपयोग करें, लेकिन आप स्क्रैच से एक खोज बार भी बना सकते हैं।

यदि आपके पास रिएक्ट प्रोजेक्ट नहीं है और आप साथ चलना चाहते हैं, तो create-react-app कमांड का उपयोग करके एक प्रोजेक्ट बनाएं।

npx बनाएं-प्रतिक्रिया-ऐप खोज-छड़

में ऐप.जेएस फ़ाइल, इनपुट टैग सहित प्रपत्र तत्व जोड़ें:

निर्यातगलती करनासमारोहअनुप्रयोग() {
वापस करना (
<डिव>
<प्रपत्र>
<इनपुट प्रकार ="खोज"/>
</form>
</div>
 )
}

आपको उपयोग करना चाहिए useStateप्रतिक्रिया हुक

और यह परिवर्तन पर घटना इनपुट को नियंत्रित करने के लिए। इसलिए, उपयोग करें और राज्य मूल्य का उपयोग करने के लिए इनपुट को संशोधित करें:

आयात {यूज़स्टेट} से "प्रतिक्रिया"
निर्यातगलती करनासमारोहअनुप्रयोग() {
 कॉन्स्ट [क्वेरी, सेटक्वेरी] = यूज़स्टेट ('')
कॉन्स्ट हैंडल चेंज = (ई) => {
query(इ।लक्ष्य।कीमत)
 }
वापस करना (
<डिव>
<प्रपत्र>
<इनपुट प्रकार ="खोज" मान = {क्वेरी} ऑन चेंज = {हैंडल चेंज} />
</form>
</div>
 )
 }

जब भी कोई उपयोगकर्ता इनपुट तत्व के अंदर कुछ टाइप करता है, हैंडल चेंज राज्य को अद्यतन करता है।

इनपुट परिवर्तन पर डेटा को फ़िल्टर करना

उपयोगकर्ता द्वारा प्रदान की जाने वाली क्वेरी का उपयोग करके खोज बार को खोज को ट्रिगर करना चाहिए। इसका मतलब है कि आपको डेटा को हैंडल चेंज फ़ंक्शन के अंदर फ़िल्टर करना चाहिए। आपको राज्य में फ़िल्टर किए गए डेटा पर भी नज़र रखनी चाहिए।

सबसे पहले, डेटा को शामिल करने के लिए राज्य को संशोधित करें:

कॉन्स्ट [राज्य, सेटस्टेट] = उपयोगस्टेट ({
 जिज्ञासा: '',
सूची: []
})

राज्य मूल्यों को इस तरह बंडल करना, प्रत्येक मूल्य के लिए एक बनाने के बजाय, रेंडर की संख्या में कटौती करना, प्रदर्शन में सुधार करना।

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

कॉन्स्ट पद = [
 { 
 यूआरएल: '',
 टैग: ['प्रतिक्रिया', 'ब्लॉग'],
 शीर्षक: 'कैसे करें बनाएं एक प्रतिक्रिया खोज छड़',
 },
 {
 यूआरएल:'',
 टैग: ['नोड','अभिव्यक्त करना'],
 शीर्षक: 'नोड में एपीआई डेटा का मजाक कैसे उड़ाएं',
 },
// अधिक डेटा यहाँ
 ]

आप भी कर सकते हैं एपीआई का उपयोग कर डेटा प्राप्त करें सीडीएन या डेटाबेस से।

अगला, जब भी उपयोगकर्ता इनपुट के अंदर टाइप करता है तो डेटा को फ़िल्टर करने के लिए हैंडल चेंज () फ़ंक्शन को संशोधित करें।

कॉन्स्ट हैंडल चेंज = (ई) => {
कॉन्स्ट परिणाम = पोस्ट.फ़िल्टर (पोस्ट => {
 अगर (e.target.value "") वापसी पोस्ट
वापस करनाडाक।शीर्षक.toLowerCase()शामिल है(इ।लक्ष्य।कीमत.toLowerCase())
 })
 सेटस्टेट ({
जिज्ञासा: इ।लक्ष्य।कीमत,
सूची: परिणाम
 })
}

यदि क्वेरी खाली है, तो फ़ंक्शन उनके द्वारा खोजे बिना पोस्ट लौटाता है। यदि किसी उपयोगकर्ता ने कोई क्वेरी टाइप की है, तो यह जांचता है कि पोस्ट शीर्षक में क्वेरी टेक्स्ट शामिल है या नहीं। पोस्ट शीर्षक और क्वेरी को लोअरकेस में बदलने से यह सुनिश्चित होता है कि तुलना केस-संवेदी है।

एक बार जब फ़िल्टर विधि परिणाम लौटाती है, तो हैंडल चेंज फ़ंक्शन क्वेरी टेक्स्ट और फ़िल्टर किए गए डेटा के साथ स्थिति को अपडेट करता है।

खोज परिणाम प्रदर्शित करना

खोज परिणामों को प्रदर्शित करने में उपयोग करने वाली सूची सरणी पर लूपिंग शामिल है नक्शा विधि और प्रत्येक आइटम के लिए डेटा प्रदर्शित करना।

निर्यातगलती करनासमारोहअनुप्रयोग() {
// स्थिति और हैंडल चेंज () फ़ंक्शन
वापस करना (
<डिव>
<प्रपत्र>
<इनपुट ऑन चेंज = {हैंडल चेंज} वैल्यू = {स्टेट.क्वेरी} टाइप ="खोज"/>
</form>
<उल>
 {(राज्य। क्वेरी ''? "": State.list.map (पोस्ट => {
 वापस करना <ली की = {पोस्ट.टाइटल}>{शीर्षक पोस्ट करें}</li>
 }))}
</ul>
</div>
 )
}

उल टैग के अंदर, घटक जांचता है कि क्वेरी खाली है या नहीं। यदि ऐसा है, तो यह एक रिक्त स्ट्रिंग प्रदर्शित करता है क्योंकि इसका अर्थ है कि उपयोगकर्ता ने कुछ भी खोजा नहीं है। यदि आप पहले से प्रदर्शित वस्तुओं की सूची के माध्यम से खोज करना चाहते हैं, तो इस चेक को हटा दें।

यदि क्वेरी खाली नहीं है, तो मानचित्र विधि खोज परिणामों पर पुनरावृति करती है और पोस्ट शीर्षकों को सूचीबद्ध करती है।

यदि खोज कोई परिणाम नहीं देती है तो आप एक चेक भी जोड़ सकते हैं जो उपयोगी संदेश प्रदर्शित करता है।

<उल>
 {(राज्य। क्वेरी ''? "कोई पोस्ट क्वेरी से मेल नहीं खाती": राज्य.सूची.लंबाई? "आपकी क्वेरी ने कोई परिणाम नहीं दिया": State.list.map (पोस्ट => {
 वापस करना <ली की = {पोस्ट.टाइटल}>{शीर्षक पोस्ट करें}</li>
 }))}
</ul>

इस संदेश को जोड़ने से उपयोगकर्ता के अनुभव में सुधार होता है क्योंकि उपयोगकर्ता को खाली स्थान नहीं दिखता है।

एक से अधिक खोज पैरामीटर को संभालना

डेटा ऐरे को फ़िल्टर करने वाला कस्टम खोज तत्व बनाने के लिए आप जावास्क्रिप्ट ईवेंट के साथ रिएक्ट स्थिति और हुक का उपयोग कर सकते हैं।

फ़िल्टर फ़ंक्शन केवल यह जांचता है कि क्वेरी सरणी के अंदर वस्तुओं में एक संपत्ति-शीर्षक-से मेल खाती है या नहीं। ऑब्जेक्ट में अन्य गुणों से क्वेरी का मिलान करने के लिए आप तार्किक OR ऑपरेटर का उपयोग करके खोज कार्यक्षमता में सुधार कर सकते हैं।