రియాక్ట్‌తో టైప్ చేస్తున్నప్పుడు శోధన ఫలితాలను ఫిల్టర్ చేయడం ఎలా

శోధన పట్టీలు మీ వెబ్‌సైట్‌లో వినియోగదారులకు అవసరమైన వాటిని కనుగొనడంలో సహాయపడే గొప్ప మార్గం. మీ సందర్శకులు దేని కోసం వెతుకుతున్నారో మీరు ట్రాక్ చేస్తే అవి విశ్లేషణలకు కూడా మంచివి.

మీరు డేటాను ఫిల్టర్ చేసే మరియు వినియోగదారు రకాలుగా ప్రదర్శించే శోధన పట్టీని రూపొందించడానికి రియాక్ట్‌ని ఉపయోగించవచ్చు. రియాక్ట్ హుక్స్ మరియు జావాస్క్రిప్ట్ మ్యాప్ మరియు ఫిల్టర్ అర్రే పద్ధతులతో, తుది ఫలితం ప్రతిస్పందించే, ఫంక్షనల్ సెర్చ్ బాక్స్.

---

---

రోజు యొక్క వీడియోను తయారు చేయండి

శోధన పట్టీని సృష్టిస్తోంది

శోధన వినియోగదారు నుండి ఇన్‌పుట్ తీసుకుంటుంది మరియు ఫిల్టరింగ్ ఫంక్షన్‌ను ట్రిగ్గర్ చేస్తుంది. నువ్వు చేయగలవు రియాక్ట్‌లో ఫారమ్‌లను సృష్టించడానికి Formik వంటి లైబ్రరీని ఉపయోగించండి , కానీ మీరు మొదటి నుండి శోధన పట్టీని కూడా సృష్టించవచ్చు.

మీకు రియాక్ట్ ప్రాజెక్ట్ లేకపోతే మరియు దానిని అనుసరించాలనుకుంటే, create-react-app ఆదేశాన్ని ఉపయోగించి ఒకదాన్ని సృష్టించండి.

npx create-react-app search-bar 

లో App.js ఫైల్, ఇన్‌పుట్ ట్యాగ్‌తో సహా ఫారమ్ ఎలిమెంట్‌ను జోడించండి:

ల్యాప్‌టాప్ స్లీప్ విండోస్ 10 నుండి మేల్కొనదు

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 లేదా డేటాబేస్ నుండి.

తర్వాత, వినియోగదారు ఇన్‌పుట్‌లో టైప్ చేసినప్పుడల్లా డేటాను ఫిల్టర్ చేయడానికి హ్యాండిల్‌చేంజ్() ఫంక్షన్‌ను సవరించండి.

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 
    }) 
} 

ప్రశ్న ఖాళీగా ఉంటే ఫంక్షన్ పోస్ట్‌లను శోధించకుండానే తిరిగి అందిస్తుంది. ఒక వినియోగదారు ప్రశ్నను టైప్ చేసి ఉంటే, పోస్ట్ శీర్షికలో ప్రశ్న వచనం ఉందో లేదో తనిఖీ చేస్తుంది. పోస్ట్ శీర్షిక మరియు ప్రశ్నను చిన్న అక్షరానికి మార్చడం వలన పోలిక కేస్-సెన్సిటివ్‌గా ఉందని నిర్ధారిస్తుంది.

ఫిల్టర్ పద్ధతి ఫలితాలను అందించిన తర్వాత, హ్యాండిల్‌చేంజ్ ఫంక్షన్ ప్రశ్న వచనం మరియు ఫిల్టర్ చేసిన డేటాతో స్థితిని అప్‌డేట్ చేస్తుంది.

శోధన ఫలితాలను ప్రదర్శిస్తోంది

శోధన ఫలితాలను ప్రదర్శించడం అనేది ఉపయోగించి జాబితా శ్రేణిపై లూప్ చేయడం పటం పద్ధతి మరియు ప్రతి అంశం కోసం డేటాను ప్రదర్శించడం.

.dat ఫైల్‌ను ఎలా తెరవాలి

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> 

ఈ సందేశాన్ని జోడించడం వలన వినియోగదారు అనుభవాన్ని మెరుగుపరుస్తుంది ఎందుకంటే వినియోగదారు ఖాళీ స్థలాన్ని చూడలేరు.

శోధన పరామితిని ఒకటి కంటే ఎక్కువసార్లు నిర్వహించడం

డేటా శ్రేణిని ఫిల్టర్ చేసే అనుకూల శోధన మూలకాన్ని సృష్టించడానికి మీరు JavaScript ఈవెంట్‌లతో పాటు రియాక్ట్ స్టేట్ మరియు హుక్స్‌లను ఉపయోగించవచ్చు.

ఫిల్టర్ ఫంక్షన్ శ్రేణిలోని ఆబ్జెక్ట్‌లలోని ఒక లక్షణం-శీర్షిక-తో సరిపోలుతుందో లేదో మాత్రమే తనిఖీ చేస్తుంది. ఆబ్జెక్ట్‌లోని ఇతర లక్షణాలకు ప్రశ్నను సరిపోల్చడానికి మీరు లాజికల్ లేదా ఆపరేటర్‌ని ఉపయోగించడం ద్వారా శోధన కార్యాచరణను మెరుగుపరచవచ్చు.