js 实现前端模糊搜索代码

可以使用前端框架如jQuery或者React等库来实现模糊搜索，也可以使用原生的JavaScript。以下是一个使用原生JavaScript实现的前端模糊搜索代码示例：

HTML：

<input type="text" id="searchInput" placeholder="Search...">
<ul id="list">
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</li>
  <li>Pineapple</li>
  <li>Mango</li>
</ul>

JavaScript：

var searchInput = document.getElementById("searchInput");
var list = document.getElementById("list").getElementsByTagName("li");

searchInput.addEventListener("keyup", function() {
  var keyword = this.value.toLowerCase();

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

    if (text.indexOf(keyword) !== -1) {
      item.style.display = "block";
    } else {
      item.style.display = "none";
    }
  }
});

这段代码会监听搜索框输入的事件，将输入的字符串转换为小写，并与列表中的每个元素文本进行比较，如果文本中包含关键字，则显示该元素，否则隐藏该元素。