react实现搜索功能

实现搜索功能的基本思路

在React中实现搜索功能通常涉及以下几个核心步骤：状态管理、输入处理、数据过滤和结果展示。以下是具体实现方法。

创建搜索组件

创建一个基础的搜索输入框组件，用于接收用户输入。

import React, { useState } from 'react';

function SearchComponent({ data }) {
  const [searchTerm, setSearchTerm] = useState('');

  const handleSearch = (event) => {
    setSearchTerm(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={searchTerm}
        onChange={handleSearch}
      />
    </div>
  );
}

过滤数据

根据用户输入的关键词过滤数据。可以使用filter方法对数组进行筛选。

const filteredData = data.filter(item =>
  item.name.toLowerCase().includes(searchTerm.toLowerCase())
);

展示搜索结果

将过滤后的数据渲染到页面上。可以通过列表或其他UI组件展示。

return (
  <div>
    <input
      type="text"
      placeholder="Search..."
      value={searchTerm}
      onChange={handleSearch}
    />
    <ul>
      {filteredData.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  </div>
);

优化搜索性能

对于大数据集，可以通过防抖（debounce）技术减少频繁触发搜索的次数。

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

function SearchComponent({ data }) {
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearchTerm = useDebounce(searchTerm, 500);

  const filteredData = data.filter(item =>
    item.name.toLowerCase().includes(debouncedSearchTerm.toLowerCase())
  );

  const handleSearch = (event) => {
    setSearchTerm(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={searchTerm}
        onChange={handleSearch}
      />
      <ul>
        {filteredData.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

处理异步搜索

如果数据需要从API获取，可以在搜索时触发异步请求。

import { useState, useEffect } from 'react';

function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (searchTerm.trim() === '') {
      setResults([]);
      return;
    }

    setLoading(true);
    fetch(`https://api.example.com/search?q=${searchTerm}`)
      .then(response => response.json())
      .then(data => {
        setResults(data);
        setLoading(false);
      });
  }, [searchTerm]);

  const handleSearch = (event) => {
    setSearchTerm(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={searchTerm}
        onChange={handleSearch}
      />
      {loading ? (
        <p>Loading...</p>
      ) : (
        <ul>
          {results.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

添加搜索高亮

为了提升用户体验，可以在搜索结果中高亮显示匹配的关键词。

function highlightText(text, highlight) {
  if (!highlight.trim()) return text;

  const regex = new RegExp(`(${highlight})`, 'gi');
  return text.split(regex).map((part, index) =>
    regex.test(part) ? <mark key={index}>{part}</mark> : part
  );
}

// 在渲染搜索结果时使用
<li key={item.id}>{highlightText(item.name, searchTerm)}</li>

完整示例代码

以下是一个完整的React搜索功能实现示例：

import React, { useState, useEffect } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

function highlightText(text, highlight) {
  if (!highlight.trim()) return text;

  const regex = new RegExp(`(${highlight})`, 'gi');
  return text.split(regex).map((part, index) =>
    regex.test(part) ? <mark key={index}>{part}</mark> : part
  );
}

function SearchComponent({ data }) {
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearchTerm = useDebounce(searchTerm, 300);
  const [filteredData, setFilteredData] = useState(data);

  useEffect(() => {
    if (debouncedSearchTerm) {
      const filtered = data.filter(item =>
        item.name.toLowerCase().includes(debouncedSearchTerm.toLowerCase())
      );
      setFilteredData(filtered);
    } else {
      setFilteredData(data);
    }
  }, [debouncedSearchTerm, data]);

  const handleSearch = (event) => {
    setSearchTerm(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={searchTerm}
        onChange={handleSearch}
      />
      <ul>
        {filteredData.map(item => (
          <li key={item.id}>
            {highlightText(item.name, debouncedSearchTerm)}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default SearchComponent;

通过以上方法，可以在React应用中实现一个功能完善且用户友好的搜索功能。根据具体需求，可以进一步扩展或调整实现方式。