So filtern Sie Suchergebnisse während der Eingabe mit React

So filtern Sie Suchergebnisse während der Eingabe mit React

Suchleisten sind eine großartige Möglichkeit, Benutzern dabei zu helfen, das zu finden, was sie auf Ihrer Website benötigen. Sie eignen sich auch gut für Analysen, wenn Sie verfolgen, wonach Ihre Besucher suchen.





Sie können React verwenden, um eine Suchleiste zu erstellen, die Daten filtert und anzeigt, während der Benutzer tippt. Mit React-Hooks und den JavaScript-Map- und Filter-Array-Methoden ist das Endergebnis ein reaktionsschnelles, funktionales Suchfeld.



MAKEUSEOF VIDEO DES TAGES

Die Suche nimmt Eingaben von einem Benutzer entgegen und löst die Filterfunktion aus. Du kannst Verwenden Sie eine Bibliothek wie Formik, um Formulare in React zu erstellen , aber Sie können auch eine Suchleiste von Grund auf neu erstellen.





Wenn Sie kein React-Projekt haben und mitmachen möchten, erstellen Sie eines mit dem Befehl create-react-app.

npx create-react-app search-bar

In dem App.js Datei, fügen Sie das Formularelement einschließlich des Eingabe-Tags hinzu:



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

Sie sollten die verwenden useState Haken reagieren und die bei Änderung Ereignis zur Steuerung der Eingabe. Importieren Sie also useState und ändern Sie die Eingabe, um den Statuswert zu verwenden:

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

Jedes Mal, wenn ein Benutzer etwas in das Eingabeelement eingibt, handleChange aktualisiert den Zustand.



Filtern der Daten bei Eingabeänderung

Die Suchleiste sollte eine Suche mit der vom Benutzer bereitgestellten Abfrage auslösen. Das bedeutet, dass Sie die Daten innerhalb der handleChange-Funktion filtern sollten. Sie sollten auch die gefilterten Daten im Status verfolgen.

Ändern Sie zuerst den Status, um die Daten einzuschließen:



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

Das Bündeln der Statuswerte auf diese Weise, anstatt einen für jeden Wert zu erstellen, reduziert die Anzahl der Renderings und verbessert die Leistung.

Die Daten, die Sie filtern, können alle Daten sein, die Sie durchsuchen möchten. Sie können beispielsweise eine Liste mit Beispiel-Blogbeiträgen wie diese erstellen:

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 
  ]

Du kannst auch Rufen Sie die Daten über eine API ab aus einem CDN oder einer Datenbank.

Ändern Sie als Nächstes die Funktion handleChange(), um die Daten zu filtern, wenn der Benutzer etwas in die Eingabe eingibt.

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

Die Funktion gibt die Beiträge zurück, ohne sie zu durchsuchen, wenn die Abfrage leer ist. Wenn ein Benutzer eine Suchanfrage eingegeben hat, wird überprüft, ob der Beitragstitel den Suchanfragentext enthält. Durch die Umwandlung des Beitragstitels und der Abfrage in Kleinbuchstaben wird sichergestellt, dass beim Vergleich die Groß-/Kleinschreibung nicht beachtet wird.

Sobald die Filtermethode die Ergebnisse zurückgibt, aktualisiert die handleChange-Funktion den Status mit dem Abfragetext und den gefilterten Daten.

Anzeigen der Suchergebnisse

Das Anzeigen der Suchergebnisse beinhaltet das Durchlaufen des Listenarrays mithilfe von Karte Methode und Anzeigen der Daten für jedes Element.

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

Innerhalb des ul-Tags prüft die Komponente, ob die Abfrage leer ist. Wenn dies der Fall ist, wird eine leere Zeichenfolge angezeigt, da dies bedeutet, dass der Benutzer nach nichts gesucht hat. Wenn Sie eine Liste von Elementen durchsuchen möchten, die Sie bereits anzeigen, entfernen Sie dieses Häkchen.

Wenn die Abfrage nicht leer ist, durchläuft die map-Methode die Suchergebnisse und listet die Beitragstitel auf.

Sie können auch ein Häkchen hinzufügen, das eine hilfreiche Meldung anzeigt, wenn die Suche keine Ergebnisse liefert.

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

Das Hinzufügen dieser Nachricht verbessert die Benutzererfahrung, da der Benutzer nicht auf ein leeres Feld schauen muss.

Windows Server 2016 vs Windows 10

Umgang mit mehr als einem Suchparameter

Sie können React-Status und -Hooks zusammen mit JavaScript-Ereignissen verwenden, um ein benutzerdefiniertes Suchelement zu erstellen, das ein Datenarray filtert.

Die Filterfunktion prüft nur, ob die Abfrage mit einer Eigenschaft – Titel – in den Objekten innerhalb des Arrays übereinstimmt. Sie können die Suchfunktion verbessern, indem Sie den logischen OR-Operator verwenden, um die Abfrage mit anderen Eigenschaften im Objekt abzugleichen.