ரியாக்ட் மூலம் தட்டச்சு செய்யும் போது தேடல் முடிவுகளை வடிகட்டுவது எப்படி

உங்கள் இணையதளத்தில் பயனர்களுக்குத் தேவையானவற்றைக் கண்டறிய தேடல் பட்டிகள் சிறந்த வழியாகும். உங்கள் பார்வையாளர்கள் எதைத் தேடுகிறார்கள் என்பதை நீங்கள் கண்காணித்தால் அவை பகுப்பாய்வுகளுக்கும் நல்லது.

பயனர் வகைகளின்படி தரவை வடிகட்டி காண்பிக்கும் தேடல் பட்டியை உருவாக்க ரியாக்டைப் பயன்படுத்தலாம். ரியாக்ட் ஹூக்குகள் மற்றும் ஜாவாஸ்கிரிப்ட் வரைபடம் மற்றும் வடிகட்டி வரிசை முறைகள் மூலம், இறுதி முடிவு பதிலளிக்கக்கூடிய, செயல்பாட்டு தேடல் பெட்டியாகும்.

---

---

அன்றைய வீடியோவை உருவாக்கவும்

தேடல் பட்டியை உருவாக்குதல்

தேடல் ஒரு பயனரிடமிருந்து உள்ளீட்டைப் பெற்று வடிகட்டுதல் செயல்பாட்டைத் தூண்டும். உன்னால் முடியும் ரியாக்டில் படிவங்களை உருவாக்க Formik போன்ற நூலகத்தைப் பயன்படுத்தவும் , ஆனால் நீங்கள் புதிதாக ஒரு தேடல் பட்டியை உருவாக்கலாம்.

உங்களிடம் ரியாக்ட் ப்ராஜெக்ட் இல்லையென்றால், அதைத் தொடர விரும்பினால், create-react-app கட்டளையைப் பயன்படுத்தி ஒன்றை உருவாக்கவும்.

npx create-react-app search-bar 

இல் App.js கோப்பு, உள்ளீட்டு குறிச்சொல் உட்பட படிவ உறுப்பைச் சேர்க்கவும்:

export default function App() { 
   return ( 
    <div> 
        <form> 
          <input type="search"/> 
        </form> 
    </div> 
  ) 
} 

நீங்கள் பயன்படுத்த வேண்டும் மாநிலத்தை பயன்படுத்தவும் எதிர்வினை கொக்கி மற்றும் இந்த மீது மாற்றம் உள்ளீட்டைக் கட்டுப்படுத்தும் நிகழ்வு. எனவே, யூஸ்ஸ்டேட்டை இறக்குமதி செய்து, மாநில மதிப்பைப் பயன்படுத்த உள்ளீட்டை மாற்றவும்:

import { useState } from "React" 
export default function App() { 
     const [query, setquery] = useState('') 
     const handleChange = (e) => { 
       setquery(e.target.value) 
     } 
     return ( 
      <div> 
          <form> 
            <input type="search" value={query} onChange={handleChange}/> 
          </form> 
      </div> 
    ) 
  } 

ஒவ்வொரு முறையும் ஒரு பயனர் உள்ளீட்டு உறுப்புக்குள் எதையாவது தட்டச்சு செய்யும் போது, கைப்பிடி மாற்றம் மாநிலத்தைப் புதுப்பிக்கிறது.

---

---

உள்ளீடு மாற்றம் பற்றிய தரவை வடிகட்டுதல்

தேடல் பட்டி பயனர் வழங்கும் வினவலைப் பயன்படுத்தி தேடலைத் தூண்ட வேண்டும். ஹேண்டில் சேஞ்ச் செயல்பாட்டில் உள்ள தரவை நீங்கள் வடிகட்ட வேண்டும் என்பதே இதன் பொருள். மாநிலத்தில் வடிகட்டப்பட்ட தரவையும் நீங்கள் கண்காணிக்க வேண்டும்.

முதலில், தரவைச் சேர்க்க மாநிலத்தை மாற்றவும்:

---

---

const [state, setstate] = useState({ 
  query: '', 
  list: [] 
}) 

ஒவ்வொரு மதிப்புக்கும் ஒன்றை உருவாக்குவதற்குப் பதிலாக, மாநில மதிப்புகளை இப்படித் தொகுத்தால், ரெண்டர்களின் எண்ணிக்கையைக் குறைத்து, செயல்திறனை மேம்படுத்துகிறது.

நீங்கள் வடிகட்டக்கூடிய தரவு நீங்கள் தேட விரும்பும் எதையும் கொண்டிருக்கலாம். எடுத்துக்காட்டாக, இது போன்ற மாதிரி வலைப்பதிவு இடுகைகளின் பட்டியலை நீங்கள் உருவாக்கலாம்:

const posts = [ 
    {   
      url: '', 
      tags: ['react', 'blog'], 
      title: 'How to create a react search bar', 
    }, 
    { 
      url:'', 
      tags: ['node','express'], 
      title: 'How to mock api data in Node', 
    }, 
    // more data here 
  ] 

உங்களாலும் முடியும் API ஐப் பயன்படுத்தி தரவைப் பெறவும் CDN அல்லது தரவுத்தளத்திலிருந்து.

அடுத்து, உள்ளீட்டிற்குள் பயனர் தட்டச்சு செய்யும் போதெல்லாம், தரவுகளை வடிகட்ட, handChange() செயல்பாட்டை மாற்றவும்.

const handleChange = (e) => { 
    const results = posts.filter(post => { 
        if (e.target.value === "") return posts 
        return post.title.toLowerCase().includes(e.target.value.toLowerCase()) 
    }) 
    setstate({ 
        query: e.target.value, 
        list: results 
    }) 
} 

வினவல் காலியாக இருந்தால், செயல்பாடு இடுகைகளைத் தேடாமலேயே வழங்கும். ஒரு பயனர் வினவலை தட்டச்சு செய்திருந்தால், இடுகையின் தலைப்பில் வினவல் உரை உள்ளதா என்பதை அது சரிபார்க்கிறது. இடுகையின் தலைப்பையும் வினவலையும் சிற்றெழுத்துக்கு மாற்றுவது, ஒப்பீடு கேஸ்-சென்சிட்டிவ் என்பதை உறுதி செய்கிறது.

வடிகட்டி முறை முடிவுகளை அளித்தவுடன், handChange செயல்பாடு வினவல் உரை மற்றும் வடிகட்டப்பட்ட தரவுடன் நிலையை மேம்படுத்துகிறது.

தேடல் முடிவுகளைக் காட்டுகிறது

தேடல் முடிவுகளைக் காண்பிப்பது, பட்டியல் வரிசையை பயன்படுத்தி லூப்பிங் செய்வதாகும் வரைபடம் முறை மற்றும் ஒவ்வொரு பொருளுக்கும் தரவைக் காண்பிக்கும்.

வைஃபை உடன் இணைகிறது ஆனால் இணைய அணுகல் இல்லை

export default function App() { 
// state and handleChange() function 
   return ( 
    <div> 
        <form> 
          <input onChange={handleChange} value={state.query} type="search"/> 
        </form> 
        <ul> 
          {(state.query === '' ? "" : state.list.map(post => { 
            return <li key={post.title}>{post.title}</li> 
          }))} 
        </ul> 
    </div> 
  ) 
} 

உல் குறிச்சொல்லின் உள்ளே, வினவல் காலியாக உள்ளதா என்பதை கூறு சரிபார்க்கிறது. அது இருந்தால், அது ஒரு வெற்று சரத்தைக் காட்டுகிறது, ஏனெனில் பயனர் எதையும் தேடவில்லை என்று அர்த்தம். நீங்கள் ஏற்கனவே காண்பிக்கும் உருப்படிகளின் பட்டியலைத் தேட விரும்பினால், இந்தச் சரிபார்ப்பை அகற்றவும்.

வினவல் காலியாக இல்லாவிட்டால், வரைபட முறையானது தேடல் முடிவுகளின் மீது திரும்பத் திரும்பச் சென்று இடுகையின் தலைப்புகளை பட்டியலிடுகிறது.

தேடல் எந்த முடிவையும் தரவில்லை என்றால், பயனுள்ள செய்தியைக் காண்பிக்கும் காசோலையையும் நீங்கள் சேர்க்கலாம்.

<ul> 
  {(state.query === '' ? "No posts match the query" : !state.list.length ? "Your query did not return any results" : state.list.map(post => { 
    return <li key={post.title}>{post.title}</li> 
  }))} 
</ul> 

இந்தச் செய்தியைச் சேர்ப்பது பயனர் அனுபவத்தை மேம்படுத்துகிறது, ஏனெனில் பயனர் வெற்று இடத்தைப் பார்க்கவில்லை.

தேடல் அளவுருவை ஒன்றுக்கு மேற்பட்ட முறை கையாளுதல்

தரவு வரிசையை வடிகட்ட தனிப்பயன் தேடல் உறுப்பை உருவாக்க, ஜாவாஸ்கிரிப்ட் நிகழ்வுகளுடன் ரியாக்ட் ஸ்டேட் மற்றும் ஹூக்குகளைப் பயன்படுத்தலாம்.

வரிசையின் உள்ளே உள்ள பொருள்களில் உள்ள ஒரு பண்புடன்-தலைப்புடன் வினவல் பொருந்துகிறதா என்பதை மட்டுமே வடிகட்டி செயல்பாடு சரிபார்க்கும். பொருளில் உள்ள பிற பண்புகளுடன் வினவலைப் பொருத்த தருக்க அல்லது ஆபரேட்டரைப் பயன்படுத்தி தேடல் செயல்பாட்டை மேம்படுத்தலாம்.