如何修改JavaScript搜索过滤列表 实现输入2-3字符后显示结果

核心逻辑只需要在常规列表过滤的基础上做两处调整：

• 页面初始状态默认隐藏所有列表项
• 给输入监听加长度校验，输入内容长度未达到设定阈值时不执行匹配，保持所有项隐藏；长度达标后再执行关键词匹配显示对应结果

完整实现代码 #

HTML结构 #

<input type="text" id="searchInput" placeholder="输入关键词搜索">
<ul id="searchResult">
  <li>北京</li>
  <li>上海</li>
  <li>广州</li>
  <li>深圳</li>
  <li>杭州</li>
  <li>成都</li>
  <li>重庆</li>
  <li>武汉</li>
</ul>

CSS样式 #

/* 初始隐藏所有结果项 */
#searchResult li {
  display: none;
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
  list-style: none;
}
/* 匹配成功的项添加该类即可显示 */
#searchResult li.active {
  display: block;
}

JavaScript逻辑 #

const input = document.getElementById('searchInput');
const resultItems = document.querySelectorAll('#searchResult li');
// 自定义触发搜索的最小字符长度，需要3个字符触发就改成3
const MIN_TRIGGER_LENGTH = 2;

input.addEventListener('input', function() {
  const searchKey = this.value.trim().toLowerCase();
  // 输入长度不足，全部隐藏，不执行匹配
  if (searchKey.length < MIN_TRIGGER_LENGTH) {
    resultItems.forEach(item => item.classList.remove('active'));
    return;
  }
  // 长度达标，执行匹配逻辑
  resultItems.forEach(item => {
    const itemText = item.textContent.toLowerCase();
    item.classList.toggle('active', itemText.includes(searchKey));
  });
});

可自定义调整项 #

• 修改MIN_TRIGGER_LENGTH的值即可调整触发搜索需要的字符数
• 若需要匹配规则为「关键词开头匹配」，将itemText.includes(searchKey)替换为itemText.startsWith(searchKey)即可
• 若列表数据量较大，可以给input事件加防抖逻辑，减少频繁DOM操作提升性能
• 若需要支持拼音匹配、高亮关键词等扩展效果，在匹配分支里追加对应逻辑即可

内容的提问来源于stack exchange，提问作者Kerem Aladağ