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

基础概念

实时搜索栏是一种常见的用户界面组件，它允许用户在输入文本时立即看到与输入内容匹配的结果。在JavaScript（JS）和React框架中，这种功能通常通过监听输入框的变化事件，并根据输入内容动态过滤数据来实现。

类型

前端实现：完全在前端使用JS或React实现，不涉及后端服务。
后端支持：前端发送请求到后端API，后端处理搜索逻辑并返回结果。

应用场景

电子商务网站的产品搜索。
社交媒体平台的内容搜索。
代码编辑器的自动补全功能。
数据库查询工具的实时过滤。

示例代码（React）

以下是一个简单的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;