Snippet

Filtern eines String-Arrays für Suchvorschläge

Array.prototype.filter erstellt ein neues Array mit allen Elementen, die eine gegebene Bedingung erfüllen. In dieser Komponente filtert die Methode die Elementliste in Echtzeit basierend auf der Benutzereingabe.

snippet.js

javascript

import React, { useState } from 'react';
 
function SearchList({ items }) {
  const [query, setQuery] = useState('');
 
  const matchingItems = items.filter((item) =>
    item.toLowerCase().includes(query.toLowerCase())
  );
 
  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      <ul>
        {matchingItems.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

react

Erklärung

const matchingItems = items.filter((item) =>

Wendet die Array-Filtermethode an, um über jedes Zeichenketten-Element der Liste zu iterieren.

item.toLowerCase().includes(query.toLowerCase())

Führt einen Vergleich ohne Berücksichtigung von Groß-/Kleinschreibung durch, um nach dem Suchbegriff zu prüfen.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Filtern eines String-Arrays für Suchvorschläge

Verwandt