如何使用javascript按html属性值过滤大型列表

我正在尝试为许多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

属性的值来实现搜索，而不是如何实现模糊搜索。示例：

如果您感兴趣的只是根据输入中的值过滤

li

s，那么这可以通过多种方式完成。我用jQuery组装了一些东西，但是任何带有视图层的东西，比如React或Angular，都可以管理。模糊搜索的定义不是很好，但会进行某种模糊搜索。我把电源插上了

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

var liElements=$.makeArray（$（'#图标列表li'）.map（函数（idx，elm）{
var-jElm=$（elm）；
var value=jElm.find（'input'）.attr（'value'）；
返回{
杰姆，价值
};
}));
var保险丝=新保险丝（元件、{
键：[“值”]，
阈值：0.2
});
var search=$（“#search”）；
var filter=函数（）{
var target=search.val（）.trim（）；
如果（目标长度<1）{
元素forEach（函数（obj）{
obj.jElm.show（）；
});
返回；
}
var结果=保险丝搜索（目标）；
元素forEach（函数（obj）{
obj.jElm.hide（）；
});
结果：forEach（功能（obj）{
obj.jElm.show（）；
});
};
search.keyup（过滤器）；
$（“#提交”）。单击（筛选）







是否要与值进行模糊匹配？有多模糊？正则表达式模糊？或者还有更模糊的吗？不是那么模糊。只是不够模糊，所以拼写错误仍然有效。也许只有一两个字母是错的？例如，我希望
safe
仍然显示用户搜索的
sfae
Levenshtein是否可能是您所需要的：@le_m问题是我不知道如何获取要搜索的内容的数组。最好的解决方案是使用包含所有图标/名称以及输入元素的hashmap/数组。键入后，根据链接的问题通过hashmap/数组搜索来构建结果列表。然后，您可以像上面所做的那样，轻松地从结果生成html结构。为了与浏览器兼容，可以用常规的长格式替换速记属性名对象初始化器。库建议与主题无关，您不需要jQuery。但是，+1清楚地演示了一个简单解决方案的机制。@FIzzyTea同意，您当然不需要jQuery，但时间太晚了，它为我节省了几行。速记初始化也是如此。不管是否使用jQuery，这种设计在DOM上都相当粗糙，并且（对于生产环境而言）可以得到相当大的改进。纯粹是一个概念性的演示。同意，您根本不应该在DOM中存储数据。