Javascript 按文本字段筛选列表

我创建了一个小应用程序，帮助我在工作中提高工作效率。它根据标签的文本内容过滤标签列表。它目前非常适合查找连续的文本行，但我更愿意将其重新实现为一个过滤器，用于非连续的文本组合

例如，如果标记中的字符串是Appleville，MN，那么如果您键入Apple、Appleville或App，当前筛选器将找到它，但我希望能够使用App MN之类的输入成功地进行筛选

谁能给我指一下正确的方向吗？我不确定我需要什么样的精确算法。谢谢

备注：我在下面列出了一些代码，其中包括我正在筛选的搜索项目类型、当前筛选功能以及搜索字段的示例

函数过滤器列表{ var输入、滤波器、ul、li、a、i、TXT值； input=document.getElementById'myInput'； filter=input.value.toUpperCase； ul=document.getElementByIditemList； li=ul.getElementsByTagName'li'； 对于i=0；i-1{ 李[i].style.display=； }否则{ li[i].style.display=none； } } }

---

这是一个经过修改的版本，可以满足您的需要

它将筛选器字符串按空格拆分以创建一个筛选器数组，仅当它们对数组的每个子字符串有效时才会显示

函数过滤器列表{ var输入、滤波器、ul、li、a、i、TXT值； input=document.getElementById'myInput'； filter=input.value.toUpperCase； ul=document.getElementByIditemList； li=ul.getElementsByTagName'li'； 对于i=0；if.length let shouldDisplay=true //测试每个筛选器，仅当字符串包含所有筛选器时才存储true filters.forEachfilt=>{ shouldDisplay=shouldDisplay&&txtValue.toUpperCase.IncludeFilt } //更新可见性 //如果字符串包含所有筛选器，则设置为可见 //或者如果没有过滤器 li[i].style.display=shouldDisplay | | filters.length==0？：无； } }

---

这是一个经过修改的版本，可以满足您的需要

它将筛选器字符串按空格拆分以创建一个筛选器数组，仅当它们对数组的每个子字符串有效时才会显示

函数过滤器列表{ var输入、滤波器、ul、li、a、i、TXT值； input=document.getElementById'myInput'； filter=input.value.toUpperCase； ul=document.getElementByIditemList； li=ul.getElementsByTagName'li'； 对于i=0；if.length let shouldDisplay=true //测试每个筛选器，仅当字符串包含所有筛选器时才存储true filters.forEachfilt=>{ shouldDisplay=shouldDisplay&&txtValue.toUpperCase.IncludeFilt } //更新可见性 //如果字符串包含所有筛选器，则设置为可见 //或者如果没有过滤器 li[i].style.display=shouldDisplay | | filters.length==0？：无； } } var itensList=document.querySelectorAll'itemList li'； 函数过滤器列表{ var valueInput=document.querySelector'myInput'.value.toLowerCase.trim； forvar i=0；i 康斯特城市=[{ 国家：MN， 城市：阿普尔维尔 }, { 国家：或， 城市：橙城 }, { 州：加利福尼亚州， 城市：新西兰 }, { 州：加利福尼亚州， 城市：巴纳维尔 } ] 变量选项={ 应该排序：是的， 阈值：0.6， 地点：0， 距离：100， 最大模式长度：32， minMatchCharLength:2， 关键字：[“州”、“市”] } var fuse=新保险丝规格、选项 常量输入=document.getElementByIdmyInput input.oninput=事件=>{ const results=fuse.searchevent.target.value 结果的结果{ console.logresult.state、result.city } } 我建议你使用。它是一个近似的字符串匹配libraray，并且它是轻量级的，易于设置。您只需要向它提供对象列表，并使用对象的键作为其键

康斯特城市=[{ 国家：MN， 城市：阿普尔维尔 }, { 国家：或， 城市：橙城 }, { 州：加利福尼亚州， 城市：新西兰 }, { 州：加利福尼亚州， 城市：巴纳维尔 } ] 变量选项={ 应该排序：是的， 阈值：0.6， 地点：0， 距离：100， 最大模式长度：32， minMatchCharLength:2， 关键字：[“州”、“市”] } var fuse=新保险丝规格、选项 常量输入=document.getElementByIdmyInput input.oninput=事件=>{ const results=fuse.searchevent.target.value 结果的结果{ console.logresult.state、result.city } }

---

哇，这个真漂亮！非常感谢你的帮助！哇，这个真漂亮！非常感谢你的帮助！这也很好，是我决定实现的版本。你能在下面这一行详细说明一下吗？我还不太熟悉js方法。filters=filters.filterf=>f.length啊，我明白了。现在很清楚了，非常感谢DDarn，经过进一步的测试，我似乎错过了一些最初的东西。它只是根据最近的单词过滤列表。例如，如果您键入kiwi CA或bana CA，它将显示两个CA条目。您知道为什么会发生这种情况吗？@artifc3 ho我没有看到，我知道它来自何处，更新答案以更正此错误；谢谢你调查此事！我试图自己修好它，但没能让它正常工作。你介意看一下bug修复的逻辑吗？这也很好，是我决定实现的版本。你能在下面这一行详细说明一下吗？我还不太熟悉js方法。filters=filters.filterf=>f.length啊，我明白了。现在很清楚了，非常感谢DDarn，经过进一步的测试，我似乎错过了一些最初的东西。它只是根据最近的单词过滤列表。例如，如果您键入kiwi CA或bana CA，它将显示两个CA条目。您知道为什么会发生这种情况吗？@artifc3 ho我没有看到，我知道它来自何处，更新答案以更正此错误；谢谢你调查此事！我试图自己修好它，但没能让它正常工作。你介意看看bug修复的逻辑吗？