JS/React -带映射的实时搜索栏

import React, { useState } from 'react';

const data = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];

function RealTimeSearch() {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);

  const handleSearch = (event) => {
    const term = event.target.value;
    setSearchTerm(term);
    const filteredResults = data.filter(item =>
      item.toLowerCase().includes(term.toLowerCase())
    );
    setResults(filteredResults);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={searchTerm}
        onChange={handleSearch}
      />
      <ul>
        {results.map((result, index) => (
          <li key={index}>{result}</li>
        ))}
      </ul>
    </div>
  );
}

export default RealTimeSearch;