JS如何配合input框实现模糊搜索

在JavaScript中，要结合input框实现模糊搜索，你可以监听input框的input事件，然后使用该事件中的target.value来获取输入的内容，接着根据这个内容筛选你的搜索数据集合。

以下是一个简单的例子，假设你有一个列表需要根据输入的关键词进行模糊搜索：

HTML部分：

<input type="text" id="searchInput" placeholder="Search...">
<ul id="searchResults">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
  <!-- 更多列表项 -->
</ul>

JavaScript部分：

document.getElementById('searchInput').addEventListener('input', function() {
  var input = this.value.toLowerCase(); // 获取输入并转换为小写
  var items = document.querySelectorAll('#searchResults li'); // 获取所有列表项
  items.forEach(function(item) {
    var text = item.textContent || item.innerText; // 获取列表项文本
    var match = text.toLowerCase().includes(input); // 检查文本是否包含输入
    if (match) {
      item.style.display = ''; // 如果匹配，显示该项
    } else {
      item.style.display = 'none'; // 如果不匹配，隐藏该项
    }
  });
});

在这个例子中，每当用户在input框中输入时，都会触发一个事件处理函数，该函数将遍历列表中的每一个li元素，检查是否包含输入的文本。如果包含，则显示该元素；如果不包含，则隐藏该元素。这样就实现了模糊搜索的功能。