前端做模糊搜索

实现前端模糊搜索可以使用JavaScript中的正则表达式和数组的filter()方法。

首先，你需要一个输入框来让用户输入搜索关键字，然后在每次输入时触发一个函数来处理搜索逻辑。在这个函数中，你可以获取输入框中的文本，然后使用正则表达式来匹配所有包含该文本的项。例如：

const input = document.querySelector('#search-input');
const items = ['apple', 'banana', 'orange', 'kiwi'];

function search() {
  const searchText = input.value.toLowerCase();
  const filteredItems = items.filter(item => {
    const regex = new RegExp(searchText, 'gi');
    return item.match(regex);
  });
  console.log(filteredItems);
}

input.addEventListener('input', search);

在这个例子中，我们使用了一个简单的输入框和一组水果作为搜索示例。当用户在输入框中输入一个字符时，我们调用search函数来处理搜索逻辑。首先，我们将输入文本转换为小写字母，以便在搜索时不区分大小写。然后，我们使用数组的filter()方法来过滤包含文本的项。在filter()方法中，我们使用正则表达式来匹配项中的文本。这里我们使用了'gi'标志来执行全局不区分大小写匹配。

最后，我们将过滤后的项打印到控制台中。你可以根据自己的需求将它们显示在页面上或执行其他操作。

希望这个例子能帮到你！