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

Question

我正在使用过滤器搜索框，但我希望它仅在输入至少两个字母时才开始显示结果，因为我有很多需要过滤的内容，而且当您开始搜索时列表很大只需要一个字母。

我已经尝试寻找解决此问题的方法，但没有成功，我的 javascript 知识确实达不到标准，所以如果这是一个简单的修复，我们深表歉意。

我的代码是：

document.querySelector('#searchInput').addEventListener('input', () => {
  let filter = document.querySelector('#searchInput').value.toUpperCase();
  document.querySelectorAll('#productli li').forEach(el => {
    let a = el.querySelector('a'); // gets the first only
    el.style.display = filter && (a.textContent || a.innerText).toUpperCase().indexOf(filter) != -1 ? 'list-item' : 'none';
  });
});

#productli li {
  display: none;
  list-style-type: none;
}

<input type="text" id="searchInput" placeholder="Enter your search term here">
<ul id="productli">
  <li><a href="#">Product 1</a></li>
  <li><a href="#">Product 2</a></li>
  <li><a href="#">Product 3</a></li>
</ul>

Answer 1

最简单的是if，测试长度和return

我也建议你缓存列表

const list = document.querySelectorAll('#productli li');
document.getElementById('searchInput').addEventListener('input', function() { // now you can use "this"
  let filter = this.value.toUpperCase();
  if (filter && filter.length<3) return
  list.forEach(el => {
    let a = el.querySelector('a'); // gets the first only
    el.style.display = filter && (a.textContent || a.innerText).toUpperCase().indexOf(filter) != -1 ? 'list-item' : 'none';
  });
});

#productli li {
  display: none;
  list-style-type: none;
}

<input type="text" id="searchInput" placeholder="Enter your search term here">
<ul id="productli">
  <li><a href="#">Product 1</a></li>
  <li><a href="#">Product 2</a></li>
  <li><a href="#">Product 3</a></li>
</ul>

Answer 2

我认为实现此目的的一种简单直接的方法是简单地添加一个 if 并检查是否 filter.length >= 2

此外，如果您想“取消过滤”并停止显示结果，您可以在设置 el.style.display = none

的位置添加一个 else

这个是可以优化的，但是一定要记得keep it simple, stupid

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

How to display Javascript filter results with a minumum of 2 characters entered?

html

javascript

css

search

filter