Πώς να φιλτράρετε τα αποτελέσματα αναζήτησης κατά την πληκτρολόγηση με το React

Οι γραμμές αναζήτησης είναι ένας πολύ καλός τρόπος για να βοηθήσετε τους χρήστες να βρουν αυτό που χρειάζονται στον ιστότοπό σας. Είναι επίσης καλά για αναλυτικά στοιχεία, εάν παρακολουθείτε τι αναζητούν οι επισκέπτες σας.

Μπορείτε να χρησιμοποιήσετε το React για να δημιουργήσετε μια γραμμή αναζήτησης που φιλτράρει και εμφανίζει δεδομένα καθώς πληκτρολογούν οι χρήστες. Με τα άγκιστρα React και τις μεθόδους χαρτών JavaScript και συστοιχίας φίλτρων, το τελικό αποτέλεσμα είναι ένα αποκριτικό, λειτουργικό πλαίσιο αναζήτησης.

---

---

ΚΑΤΑΣΚΕΥΗ ΒΙΝΤΕΟ ΤΗΣ ΗΜΕΡΑΣ

Δημιουργία της γραμμής αναζήτησης

Η αναζήτηση θα λάβει δεδομένα από έναν χρήστη και θα ενεργοποιήσει τη λειτουργία φιλτραρίσματος. Μπορείς χρησιμοποιήστε μια βιβλιοθήκη όπως το Formik για να δημιουργήσετε φόρμες στο React , αλλά μπορείτε επίσης να δημιουργήσετε μια γραμμή αναζήτησης από την αρχή.

Εάν δεν έχετε έργο React και θέλετε να το ακολουθήσετε, δημιουργήστε ένα χρησιμοποιώντας την εντολή δημιουργία-react-app.

npx create-react-app search-bar 

Στο App.js αρχείο, προσθέστε το στοιχείο φόρμας, συμπεριλαμβανομένης της ετικέτας εισαγωγής:

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

Θα πρέπει να χρησιμοποιήσετε το χρήση Κατάσταση React hook και το onChange συμβάν για τον έλεγχο της εισόδου. Επομένως, εισαγάγετε το useState και τροποποιήστε την είσοδο για να χρησιμοποιήσετε την τιμή κατάστασης:

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

Κάθε φορά που ένας χρήστης πληκτρολογεί κάτι μέσα στο στοιχείο εισόδου, λαβήΑλλαγή ενημερώνει το κράτος.

---

---

πώς να εισαγάγετε τη λίστα αναπαραγωγής στο spotify

Φιλτράρισμα των δεδομένων κατά την αλλαγή εισόδου

Η γραμμή αναζήτησης θα πρέπει να ενεργοποιεί μια αναζήτηση χρησιμοποιώντας το ερώτημα που παρέχει ο χρήστης. Αυτό σημαίνει ότι θα πρέπει να φιλτράρετε τα δεδομένα μέσα στη συνάρτηση handleChange. Θα πρέπει επίσης να παρακολουθείτε τα φιλτραρισμένα δεδομένα στην κατάσταση.

Πρώτα, τροποποιήστε την κατάσταση για να συμπεριλάβετε τα δεδομένα:

---

---

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 ή μια βάση δεδομένων.

Στη συνέχεια, τροποποιήστε τη συνάρτηση handleChange() για να φιλτράρετε τα δεδομένα κάθε φορά που ο χρήστης πληκτρολογεί μέσα στην είσοδο.

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

Η συνάρτηση επιστρέφει τις δημοσιεύσεις χωρίς να τις αναζητήσει εάν το ερώτημα είναι κενό. Εάν ένας χρήστης έχει πληκτρολογήσει ένα ερώτημα, ελέγχει εάν ο τίτλος της ανάρτησης περιλαμβάνει το κείμενο του ερωτήματος. Η μετατροπή του τίτλου της ανάρτησης και του ερωτήματος σε πεζά διασφαλίζει ότι η σύγκριση είναι χωρίς διάκριση πεζών-κεφαλαίων.

Μόλις η μέθοδος φίλτρου επιστρέψει τα αποτελέσματα, η συνάρτηση handleChange ενημερώνει την κατάσταση με το κείμενο του ερωτήματος και τα φιλτραρισμένα δεδομένα.

Εμφάνιση των αποτελεσμάτων αναζήτησης

Η εμφάνιση των αποτελεσμάτων αναζήτησης συνεπάγεται βρόχο πάνω από τον πίνακα λίστας χρησιμοποιώντας το χάρτης μέθοδο και εμφάνιση των δεδομένων για κάθε στοιχείο.

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, το στοιχείο ελέγχει εάν το ερώτημα είναι κενό. Εάν είναι, εμφανίζει μια κενή συμβολοσειρά επειδή σημαίνει ότι ο χρήστης δεν έχει αναζητήσει τίποτα. Εάν θέλετε να πραγματοποιήσετε αναζήτηση σε μια λίστα στοιχείων που εμφανίζετε ήδη, αφαιρέστε αυτόν τον έλεγχο.

Εάν το ερώτημα δεν είναι κενό, η μέθοδος χάρτη επαναλαμβάνεται πάνω από τα αποτελέσματα αναζήτησης και παραθέτει τους τίτλους των αναρτήσεων.

Μπορείτε επίσης να προσθέσετε μια επιταγή που εμφανίζει ένα χρήσιμο μήνυμα εάν η αναζήτηση δεν εμφανίσει αποτελέσματα.

το καλύτερο λογισμικό ελεύθερης ομιλίας σε κείμενο

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

Η προσθήκη αυτού του μηνύματος βελτιώνει την εμπειρία χρήστη επειδή ο χρήστης δεν μένει να κοιτάζει κενό.

Χειρισμός παραμέτρων αναζήτησης περισσότερες από μία φορές

Μπορείτε να χρησιμοποιήσετε την κατάσταση React και τα άγκιστρα, μαζί με συμβάντα JavaScript, για να δημιουργήσετε ένα προσαρμοσμένο στοιχείο αναζήτησης που φιλτράρει έναν πίνακα δεδομένων.

Η συνάρτηση φίλτρου ελέγχει μόνο εάν το ερώτημα ταιριάζει με μία ιδιότητα —τίτλος— στα αντικείμενα μέσα στον πίνακα. Μπορείτε να βελτιώσετε τη λειτουργικότητα αναζήτησης χρησιμοποιώντας τον λογικό τελεστή OR για να αντιστοιχίσετε το ερώτημα με άλλες ιδιότητες του αντικειμένου.