MDN 的搜索结果自动补全是怎么做的？（三）

发表于

这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战

本文翻译自：hacks.mozilla.org/2021/08/mdn… ，作者：Peter Bengtsson

MDN Web Docs 中新添加了一个搜索结果自动补全的功能，这使你可以通过键入文档标题的一部分来快速直接跳转到您要查找的文档。这是关于这个功能如何做的的文章。如果你坚持到底，我将分享一个“复活节彩蛋”功能。

image.png

系列文章

MDN 的搜索结果自动补全是怎么做的？（一）

MDN 的搜索结果自动补全是怎么做的？（二）

实现细节

上一篇文章我们看到大致的代码结构，其中搜索部分的代码是这样的

1
2
3
4
5
6
7
8
9
10
11
12
js复制代码(async function() { 
    const response = await fetch('/en-US/search-index.json'); 
    const documents = await response.json(); 
    const inputValue = document.querySelector( 'input[type="search"]' ).value; 
    const flex = FlexSearch.create(); 
    documents.forEach(({ title }, i) => { 
        flex.add(i, title); 
    }); 
    const indexResults = flex.search(inputValue); 
    const foundDocuments = indexResults.map((index) => documents[index]); 
    displayFoundDocuments(foundDocuments.slice(0, 10)); 
})();

首先，使用了一个名为 downshift 的 React 库，它处理所有的交互、显示，并确保显示的搜索结果是可访问的。downshift 是一个成熟的库，它通过构建这样的小部件应对了无数挑战，特别是在可访问性方面。

downshift 地址：www.npmjs.com/package/dow…

其次，使用了 FlexSearch 库，它是一个第三方库，为了确保搜索标题时考虑到自然语言。它将自己描述为“Web 上最快、内存最灵活、零依赖的全文搜索库”。这比尝试简单地在其他字符串的长列表中查找一个字符串要高效和准确得多。

决定先展示哪个结果

公平地说，如果用户输入 foreac，那么将1万多个文档标题缩减到只包含 foreac 的标题并不难，然而我们需要决定先显示哪个结果。我们实现这一点的方法是对页面浏览量进行统计。我们记录，对于每一个 MDN URL，哪一个获得最多的页面浏览量，决定页面的“流行度”。大多数人决定到达的文档最有可能是用户正在搜索的文档。

这部分具体可以看：hacks.mozilla.org/2021/03/how…

源码地址

所有这些代码都在 Yari repo 中，Yari repo 是构建和预览所有 MDN 内容的项目。要找到确切的代码，请单击 client/src/search.tsx。你会发现所有的代码惰性加载，搜索，预加载，和显示自动完成搜索。

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%