如何过滤大型列表并在匹配结果约20条时显示下拉菜单

1. 现成库方案 #

直接用Select2或者Choices.js即可，两个组件都原生支持你需要的阈值触发下拉逻辑，3000条量级的本地过滤完全无性能压力，不需要从零开发逻辑：

• 核心配置可以直接设置minimumInputLength参数控制输入字符阈值，也可以自定义匹配回调，当过滤后结果数≤20的时候才渲染下拉选项。
• 自带防抖、模糊匹配、关键词高亮等基础功能，只需要提前把全量数据传入组件数据源即可，不会出现浏览器卡顿崩溃的问题。

2. 自定义jQuery/JS实现方案 #

如果不想引入第三方库，几十行代码就能实现核心功能，实现逻辑和示例代码如下：

核心实现步骤 #

• 全量条目提前存在前端数组变量中，不要直接渲染到DOM，避免初始加载卡顿。
• 给输入框绑定input事件，加300ms防抖，避免高频输入触发多次过滤。
• 每次输入后用关键词匹配全量数组，拿到匹配结果列表。
• 匹配结果数量≤20时渲染展示下拉列表，否则隐藏下拉引导用户继续输入。

可直接运行的示例代码 #

<!-- 页面结构 -->
<input type="text" id="searchInput" placeholder="输入关键词搜索">
<div id="dropdownList" style="display: none; border: 1px solid #eee; max-height: 300px; overflow-y: auto;"></div>

// 模拟全量数据，实际使用时替换为你的条目列表即可
const allItems = Array.from({length: 3000}, (_, i) => `测试条目${i + 1}`);
let timer = null;

$('#searchInput').on('input', function() {
  // 防抖逻辑
  clearTimeout(timer);
  timer = setTimeout(() => {
    const keyword = $(this).val().trim().toLowerCase();
    // 无输入时隐藏下拉
    if (!keyword) {
      $('#dropdownList').hide();
      return;
    }
    // 模糊匹配条目
    const matchedItems = allItems.filter(item => item.toLowerCase().includes(keyword));
    // 匹配结果在1-20条区间时展示下拉
    if (matchedItems.length <= 20 && matchedItems.length > 0) {
      // 渲染匹配选项
      const html = matchedItems.map(item => `<div style="padding: 8px; cursor: pointer;">${item}</div>`).join('');
      $('#dropdownList').html(html).show();
      // 点击选项回填输入框
      $('#dropdownList div').on('click', function() {
        $('#searchInput').val($(this).text());
        $('#dropdownList').hide();
      });
    } else {
      $('#dropdownList').hide();
    }
  }, 300);
});

// 点击页面其他区域自动隐藏下拉
$(document).on('click', function(e) {
  if (!$(e.target).closest('#searchInput, #dropdownList').length) {
    $('#dropdownList').hide();
  }
});

优化提示 #

如果后续条目扩容到万级以上，可以给下拉加虚拟滚动逻辑，只渲染可视区域内的选项，进一步降低DOM渲染压力。

内容的提问来源于stack exchange，提问作者raghavj