时间戳

首页 > 解决方案 > 如何显示最少输入 2 个字符的 Javascript 过滤器结果？

javascript - 如何显示最少输入 2 个字符的 Javascript 过滤器结果？

问题描述

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

我试过寻找解决这个问题的方法，但没有运气，我的 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>

标签： javascripthtmlcsssearchfilter

解决方案

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

我还建议您缓存列表

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>

推荐阅读