如何为本地JSON动态填充的下拉菜单添加筛选搜索功能？

原生<select>标签无法直接嵌入输入框实现内部搜索，我们可以通过自定义HTML结构+jQuery来实现这个功能，以下是完整的解决方案：

1. 修改HTML结构 #

替换原来的<select>，改用自定义容器模拟下拉组件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="div-selectors">
  <h5>Name</h5>
  <form>
    <!-- 自定义下拉容器 -->
    <div class="custom-select">
      <!-- 选中项显示框 -->
      <div class="selected-item">Select option</div>
      <!-- 下拉内容区 -->
      <div class="dropdown-content">
        <!-- 搜索输入框 -->
        <input type="text" class="search-input" placeholder="Search name...">
        <!-- 选项列表 -->
        <ul class="options-list"></ul>
      </div>
    </div>
  </form>
</div>

2. 添加基础样式 #

用CSS模拟下拉组件的视觉效果和交互：

.custom-select {
  position: relative;
  width: 200px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.selected-item {
  padding: 8px 12px;
  background-color: #fff;
}

.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background-color: #fff;
  display: none;
  z-index: 10;
}

.search-input {
  width: calc(100% - 24px);
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid #eee;
  outline: none;
}

.options-list {
  max-height: 150px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.options-list li {
  padding: 8px 12px;
}

.options-list li:hover {
  background-color: #f5f5f5;
}

.custom-select.active .dropdown-content {
  display: block;
}

3. 编写jQuery逻辑 #

实现数据填充、搜索筛选和交互功能：

var json = [{
    "id": 3,
    "name": "Ann"
  },
  {
    "id": 4,
    "name": "Karl"
  },
  {
    "id": 31,
    "name": "Jess"
  }
];

$(document).ready(function() {
  // 填充选项列表
  function populateOptions(data) {
    var $list = $('.options-list');
    $list.empty();
    data.forEach(item => {
      $list.append(`<li data-id="${item.id}" data-name="${item.name}">${item.name}</li>`);
    });
  }

  // 初始化加载所有选项
  populateOptions(json);

  // 下拉展开/收起
  $('.selected-item').click(function() {
    $('.custom-select').toggleClass('active');
    $('.search-input').focus();
  });

  // 实时搜索筛选
  $('.search-input').on('input', function() {
    var keyword = $(this).val().toLowerCase();
    var filtered = json.filter(item => item.name.toLowerCase().includes(keyword));
    populateOptions(filtered);
  });

  // 选中选项并更新显示
  $(document).on('click', '.options-list li', function() {
    var selectedName = $(this).data('name');
    $('.selected-item').text(selectedName);
    $('.custom-select').removeClass('active');
    // 如需提交表单，可添加隐藏input同步值
    // $('<input>').attr({type: 'hidden', name: 'name', value: selectedName}).appendTo('form');
  });

  // 点击外部关闭下拉
  $(document).click(function(e) {
    if (!$(e.target).closest('.custom-select').length) {
      $('.custom-select').removeClass('active');
    }
  });
});

关键说明 #

• 用selected-item模拟原生下拉的选中状态显示，dropdown-content整合搜索框和选项列表，实现内部搜索的视觉效果
• 搜索逻辑通过监听输入框的实时输入，对JSON数据做模糊匹配后重新渲染选项
• 加入点击外部区域收起下拉的交互，提升使用体验
• 如果需要将选中值用于表单提交，可通过隐藏<input>标签同步选中的内容

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