MDN搜索结果自动补全：揭秘幕后运作

2023-12-20 16:15:50

引言

MDN Web Docs 推出了令人兴奋的新功能——搜索结果自动补全。借助这项功能，你可以轻松地键入文档标题的一部分，直接跳转到目标文档。此功能大大简化了文档查找过程，为开发人员节省了大量时间。本文将深入探讨这一功能的幕后运作原理，并提供有价值的见解，帮助你充分利用它。

技术实现

MDN 的搜索结果自动补全功能基于 JavaScript 和 CSS。当你在搜索栏中输入时，触发一个 JavaScript 函数，该函数会向服务器发送一个包含输入查询的请求。服务器会返回一个包含相关文档标题的 JSON 响应。然后，这些标题以下拉列表的形式呈现，供你选择。

关键词匹配

自动补全功能使用一种称为“模糊搜索”的技术来匹配关键词。这意味着它可以找到与你的查询部分匹配的文档标题，即使输入有拼写错误或语法错误。这使得查找文档变得更加灵活和高效。

代码示例

以下代码示例展示了搜索结果自动补全功能的基本实现：

const searchInput = document.getElementById('search-input');

searchInput.addEventListener('input', (e) => {
  const query = e.target.value;

  // 向服务器发送请求
  fetch(`/search?q=${query}`)
    .then(response => response.json())
    .then(data => {
      // 将匹配的标题呈现为下拉列表
      const results = data.results;
      const dropdown = document.getElementById('dropdown');
      results.forEach(result => {
        const option = document.createElement('option');
        option.value = result.title;
        option.textContent = result.title;
        dropdown.appendChild(option);
      });
    })
    .catch(error => {
      console.error(error);
    });
});