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

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

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

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

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

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

npx δημιουργώ-react-app Αναζήτηση-μπαρ

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

εξαγωγήΠροκαθορισμένολειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
<div>
<μορφή>
<τύπος εισόδου="Αναζήτηση"/>
</form>
</div>
 )
}

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

εισαγωγή { useState } από "Αντιδρώ"
εξαγωγήΠροκαθορισμένολειτουργίαApp() {
 const [query, setquery] = useState('')
συνθ handleChange = (e) => {
ερωτηματολόγιο(μι.στόχος.αξία)
 }
ΕΠΙΣΤΡΟΦΗ (
<div>
<μορφή>
<τύπος εισόδου="Αναζήτηση" value={query} onChange={handleChange}/>
</form>
</div>
 )
 }

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

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

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

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

συνθ [state, setstate] = useState({
 ερώτηση: '',
λίστα: []
})

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

Τα δεδομένα που φιλτράρετε μπορεί να είναι οτιδήποτε θέλετε να πραγματοποιήσετε αναζήτηση. Για παράδειγμα, μπορείτε να δημιουργήσετε μια λίστα με δείγματα αναρτήσεων ιστολογίου όπως αυτή:

συνθ αναρτήσεις = [
 { 
 url: '',
 ετικέτες: ['αντιδρώ', 'blog'],
 τίτλος: «Πώς να δημιουργώ μια αντίδραση Αναζήτηση μπαρ',
 },
 {
 url:'',
 ετικέτες: ['κόμβος','εξπρές'],
 τίτλος: 'Πώς να κοροϊδέψετε τα δεδομένα api στο Node',
 },
// περισσότερα δεδομένα εδώ
 ]

Μπορείτε επίσης να ανακτήστε τα δεδομένα χρησιμοποιώντας ένα API από ένα CDN ή μια βάση δεδομένων.

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

συνθ handleChange = (e) => {
συνθ αποτελέσματα = posts.filter (ανάρτηση => {
 εάν (e.target.value "") επιστροφή αναρτήσεων
ΕΠΙΣΤΡΟΦΗΘέση.τίτλος.to LowerCase().περιλαμβάνει(μι.στόχος.αξία.to LowerCase())
 })
 setstate({
ερώτηση: μι.στόχος.αξία,
λίστα: Αποτελέσματα
 })
}

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

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

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

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

εξαγωγήΠροκαθορισμένολειτουργίαApp() {
// κατάσταση και συνάρτηση handleChange().
ΕΠΙΣΤΡΟΦΗ (
<div>
<μορφή>
<εισαγωγή onChange={handleChange} value={state.query} type="Αναζήτηση"/>
</form>
<ul>
 {(state.query ''? "": state.list.map (ανάρτηση => {
 ΕΠΙΣΤΡΟΦΗ <li key={post.title}>{Τίτλος ανάρτησης}</li>
 }))}
</ul>
</div>
 )
}

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

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

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

<ul>
 {(state.query ''? "Καμία ανάρτηση δεν ταιριάζει με το ερώτημα": !state.list.length; "Το ερώτημά σας δεν επέστρεψε κανένα αποτέλεσμα": state.list.map (ανάρτηση => {
 ΕΠΙΣΤΡΟΦΗ <li key={post.title}>{Τίτλος ανάρτησης}</li>
 }))}
</ul>

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

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

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

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