React模糊搜索高亮精准定位键盘敲哪里亮哪里

2023-10-29 23:23:38

模糊搜索和高亮：在 React 中提升用户体验

模糊搜索：快速准确定位

模糊搜索是一项强大的功能，可帮助用户在海量数据中快速找到相关内容，即使他们的搜索查询不够精确。通过模糊匹配算法，模糊搜索可以识别包含查询中单词的近似匹配项，显著缩小搜索范围。

在 React 中实现模糊搜索非常简单，可以使用以下步骤：

// 安装必要的依赖项
npm install react-router-dom antd

// 创建一个新的 React 组件（SearchBox.js）
import React, { useState } from "react";
import { Input, Button } from "antd";

const SearchBox = () => {
  const [searchText, setSearchText] = useState("");

  const handleSearch = () => {
    // 这里可以执行搜索逻辑，并更新搜索结果
  };

  return (
    <div>
      <Input
        placeholder="搜索"
        value={searchText}
        onChange={(e) => setSearchText(e.target.value)}
      />
      <Button type="primary" onClick={handleSearch}>
        搜索
      </Button>
    </div>
  );
};

export default SearchBox;

// 在应用中添加搜索框组件（App.js）
import React from "react";
import SearchBox from "./components/SearchBox";

const App = () => {
  return (
    <div>
      <SearchBox />
    </div>
  );
};

export default App;

高亮关键词：精准定位

高亮关键词是模糊搜索的另一项重要功能，它可以帮助用户快速定位搜索查询中的关键词。通过在搜索结果中对关键词进行加亮显示，高亮可以显著提升用户体验。

在 React 中实现关键词高亮也非常简单，可以使用以下步骤：

// 创建一个新的 React 组件（Highlight.js）
import React, { useEffect } from "react";
import { useMemo } from "react";

const Highlight = ({ text, searchText }) => {
  const highlightedText = useMemo(() => {
    const regex = new RegExp(searchText, "gi");
    const parts = text.split(regex);
    return parts.map((part, i) => (
      <span
        key={i}
        dangerouslySetInnerHTML={{ __html: i % 2 === 0 ? part : `<mark>${part}</mark>` }}
      />
    ));
  }, [text, searchText]);

  useEffect(() => {
    // 滚动到高亮部分
    const element = document.getElementById("highlight");
    element.scrollIntoView({ behavior: "smooth", block: "nearest" });
  }, [highlightedText]);

  return (
    <div id="highlight">
      {highlightedText}
    </div>
  );
};

export default Highlight;

// 使用 Highlight 组件（SearchBox.js）
import Highlight from "./components/Highlight";

// ...省略其他代码...

const SearchBox = () => {
  const [searchText, setSearchText] = useState("");

  // ...省略其他代码...

  return (
    <div>
      <Input
        placeholder="搜索"
        value={searchText}
        onChange={(e) => setSearchText(e.target.value)}
      />
      <Button type="primary" onClick={handleSearch}>
        搜索
      </Button>
      <Highlight text={searchResult} searchText={searchText} />
    </div>
  );
};