javascript - 如何使用javascript通过html属性值过滤大列表

Question

我正在尝试为许多 html 图标的混合制作引用指南。我有以下 html 代码:

<input id="search" type="text" placeholder="Search Icons">
<input id="submit" type="button" value="Submit!">
<input id="cancel" type="button" value="Cancel">
<div id="icon-list">
    <li>
        <div class="icon icon-name"></div>
        <input type="text" readonly="readonly" value="name">
    </li>
    <li>
        <div class="icon icon-name2"></div>
        <input type="text" readonly="readonly" value="name2">
    </li>
    <li>
        <div class="icon icon-name3"></div>
        <input type="text" readonly="readonly" value="name3">
    </li>
    <!-- repeated 100 or more times -->
</div>

我希望能够根据图标(

)内部输入的值属性过滤掉图标(

)，最好使用模糊搜索。是否有库或某些代码可以为我执行此操作？

编辑:我主要想知道如何实现从value属性的值进行搜索，而不是如何实现模糊搜索。示例:

Answer 1

如果您感兴趣的是根据输入中的值过滤li，则可以通过很多很多方法来完成。我将一些东西与 jQuery 放在一起，但是任何带有 View 层的东西，比如 React 或 Angular，都可以管理。模糊搜索的定义并不十分明确，但Fuse.js进行某种模糊搜索。我把它插上了。

对于大约 100 个，您可能可以使用如下类似的实现(所有 jQuery 调用都可以提高效率)。

var liElements = $.makeArray($('#icon-list li').map(function(idx, elm) {
  var jElm = $(elm);
  var value = jElm.find('input').attr('value');
  return {
    jElm, value
  };
}));
var fuse = new Fuse(liElements, {
  keys: ["value"],
  threshold: 0.2
});

var search = $('#search');
var filter = function() {
  var target = search.val().trim();
  if (target.length < 1) {
    liElements.forEach(function(obj) {
      obj.jElm.show();
    });
    return;
  }
  var results = fuse.search(target);

  liElements.forEach(function(obj) {
    obj.jElm.hide();
  });
  results.forEach(function(obj) {
    obj.jElm.show();
  });
};


search.keyup(filter);
$('#submit').click(filter);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/2.2.0/fuse.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search" type="text" placeholder="Search Icons">
<input id="submit" type="button" value="Submit!">
<input id="cancel" type="button" value="Cancel">
<div id="icon-list">
  <li>
    <div class="icon icon-name"></div>
    <input type="text" readonly="readonly" value="teal">
  </li>
  <li>
    <div class="icon icon-name2"></div>
    <input type="text" readonly="readonly" value="mittens">
  </li>
  <li>
    <div class="icon icon-name3"></div>
    <input type="text" readonly="readonly" value="mittons">
  </li>
  <!-- repeated 100 or more times -->
</div>