JavaScript 前端模糊搜索实现 - 简单易懂示例

在前端中，可以使用 JavaScript 来实现模糊查询功能。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Fuzzy Search</title>
  <script>
    function fuzzySearch() {
      var input = document.getElementById('search-input').value.toLowerCase();
      var items = document.getElementsByClassName('item');

      for (var i = 0; i < items.length; i++) {
        var item = items[i];
        var text = item.innerText.toLowerCase();

        if (text.includes(input)) {
          item.style.display = 'block';
        } else {
          item.style.display = 'none';
        }
      }
    }
  </script>
</head>
<body>
  <input type="text" id="search-input" onkeyup="fuzzySearch()" placeholder="Type to search">
  
  <ul>
    <li class="item">Apple</li>
    <li class="item">Banana</li>
    <li class="item">Orange</li>
    <li class="item">Peach</li>
    <li class="item">Watermelon</li>
  </ul>
</body>
</html>

在上述示例中，我们首先获取输入框的值，并将其转换为小写字母。然后，我们遍历每个项，将其文本内容转换为小写字母，并检查输入值是否包含在项的文本中。如果包含，则显示该项，否则隐藏该项。

请注意，此示例仅适用于简单的模糊查询情况。如果需要更复杂的模糊查询功能，可以考虑使用正则表达式或模糊查询库，如 Fuse.js。