如何显示输入最少2个字符的Javascript筛选结果？

我使用一个过滤搜索框，但我希望它只开始显示结果时，至少有两个字母输入，因为我有很多需要过滤通过，列表是巨大的，当你开始搜索，因为它只需要一个字母

我尝试过寻找一种方法来解决这个问题，但没有运气，我的javascript知识真的不符合要求，所以如果这是一个简单的修复，我深表歉意

我的代码是：

document.querySelector（'#searchInput'）.addEventListener（'input'，（）=>{
让filter=document.querySelector（“#searchInput”）.value.toUpperCase（）；
document.querySelectorAll（“#productli li”）.forEach（el=>{
设a=el.querySelector（'a'）；//仅获取第一个
el.style.display=filter&（a.textContent | | a.innerText）.toUpperCase（）.indexOf（filter）！=-1？“列表项”：“无”；
});
});
#productli li li{
显示：无；
列表样式类型：无；
}






最简单的是if，测试长度和返回值

我还建议您将列表缓存起来


const list=document.querySelectorAll（'productli'）；
document.getElementById（'searchInput'）。addEventListener（'input'，function（）{//现在您可以使用“this”
让filter=this.value.toUpperCase（）；
if（filter&&filter.length{
设a=el.querySelector（'a'）；//仅获取第一个
el.style.display=filter&（a.textContent | | a.innerText）.toUpperCase（）.indexOf（filter）！=-1？“列表项”：“无”；
});
});
#productli li li{
显示：无；
列表样式类型：无；
}





我认为实现这一点的一个简单而直接的方法是简单地添加一个
if
，并检查
filter.length>=2

另外，如果要“取消筛选”并停止显示结果，可以在设置
el.style.display=none的位置添加
else

这是可以优化的，但始终记住搜索去Bounce这很好，解决了角色问题，但是，当我清除搜索框时，结果现在仍然显示。修复。请参阅更新当过滤器为空时，您还可以切换productli的显示。先生，您真是太棒了。非常感谢！你帮我省去了头痛。