JS模糊搜索的实现

一、模糊搜索概述

在开发网站或应用程序时，用户通常需要搜索特定的内容。针对大型数据集和不完整的查询，模糊搜索就显示出优势来。它可以帮助用户快速地找到他们想要的内容，同时在输入错误或拼写错误时也能够提供相关结果。

二、实现模糊搜索的技术

JavaScript提供了强大的搜索功能，可以轻松地实现模糊搜索。下面是实现模糊搜索所需的基本步骤：

1. 获取数据

在开始编写模糊搜索之前，你需要获取数据。数据可以来自于各种来源，包括数据库、服务器上的API、本地文件、第三方数据集和来自用户输入的数据。为了演示模糊搜索，我们将使用一个基于数组的JavaScript数据集。下面是一个示例代码：

const data = [{
  id: 1,
  name: 'Tom',
  city: 'New York'
}, {
  id: 2,
  name: 'Jerry',
  city: 'Los Angeles'
}, {
  id: 3,
  name: 'John',
  city: 'Chicago'
}, {
  id: 4,
  name: 'Mike',
  city: 'Houston'
}];

2. 搜索函数

在搜索函数中，我们将对数据进行筛选，只返回符合条件的结果。下面是一个示例函数：

function search(query, data) {
  const filteredData = [];
  for(let i = 0; i < data.length; i++) {
    const {name, city} = data[i];
    if(name.includes(query) || city.includes(query)) {
      filteredData.push(data[i]);
    }
  }
  return filteredData;
}

上面的函数将返回符合查询条件的数据项数组，如果没有符合条件的数据项，则返回空数组。

3. 实现模糊搜索

为了实现模糊搜索，我们需要使用事件监听器，为输入框添加一个键盘事件，以便在用户输入时更新搜索结果。下面是一个示例代码：

const input = document.getElementById('searchInput');
const output = document.getElementById('searchOutput');
input.addEventListener('keyup', (event) => {
  const query = event.target.value.toLowerCase();
  const filteredData = search(query, data);
  const html = filteredData.map(item => `
    
      
   ${item.name}
   
      
   ${item.city}
   
    
  `).join('');
  output.innerHTML = html;
});

在上面的代码中，我们使用了JavaScript的map()方法来创建一个HTML模板字符串。这个模板字符串将被插入到搜索结果的列表中。我们还使用了数组的join()方法将这些模板字符串合并成一个字符串。