神圣的「MDN 搜索」与高光：我的灯光时刻

2023-09-24 03:49:14

照亮代码世界
在程序员的世界中，MDN 搜索就像是一盏指路明灯，为我们提供即时、准确的信息。而它的搜索高亮功能更是锦上添花，让搜索结果更加清晰易读。

高光时刻：如何实现？

MDN 搜索高亮效果的实现主要分为两个步骤：搜索和高亮。

1. 搜索
MDN 搜索使用的是 downshift 搜索功能，这是一个 React 组件库，提供了强大的搜索功能。downshift 组件库使用了一种叫做「模糊搜索」的算法来搜索结果，这种算法可以根据用户输入的关键词来匹配结果，即使用户输入的关键词并不完全正确。

2. 高亮
搜索结果展示使用的是 flexSearch 搜索库，这是一个 JavaScript 库，提供了快速、灵活的搜索功能。flexSearch 库使用了一种叫做「标记化搜索」的算法来高亮搜索结果，这种算法可以根据用户输入的关键词来标记结果中的相关文本，从而使搜索结果更加清晰易读。

构建属于你的高光时刻

现在，我们一起来看看如何将 MDN 搜索高亮效果应用到您的项目中。

1. 安装必要的库
首先，您需要安装 downshift 和 flexSearch 库。您可以通过以下命令来安装这些库：

npm install downshift
npm install flexSearch

2. 创建搜索组件
接下来，您需要创建一个搜索组件。这个组件将负责处理用户的搜索请求并展示搜索结果。您可以使用 downshift 来创建搜索组件，代码如下：

import { Downshift } from 'downshift';
import { FlexSearch } from 'flexSearch';

const SearchComponent = () => {
  const [results, setResults] = useState([]);
  const [query, setQuery] = useState('');

  const index = FlexSearch.createIndex({
    tokenize: 'full',
    resolution: 4,
  });

  useEffect(() => {
    // Add your data to the index
    index.add(data);
  }, []);

  const handleSearch = (e) => {
    setQuery(e.target.value);
    const searchResults = index.search(query);
    setResults(searchResults);
  };

  return (
    <Downshift>
      {({ getInputProps, getMenuProps, getItemProps, isOpen }) => (
        <div>
          <input {...getInputProps()} onChange={handleSearch} />
          {isOpen && (
            <ul {...getMenuProps()}>
              {results.map((result) => (
                <li {...getItemProps({ item: result })}>
                  {result.title}
                </li>
              ))}
            </ul>
          )}
        </div>
      )}
    </Downshift>
  );
};

3. 添加高亮效果
最后，您需要添加高亮效果。您可以使用 flexSearch 库来添加高亮效果，代码如下：

const highlighter = FlexSearch.createHighlighter({
  preTag: '<mark>',
  postTag: '</mark>',
});

const highlightedResults = results.map((result) => {
  return {
    ...result,
    title: highlighter.highlight(result.title, query),
  };
});