如何在select下拉框的输入标签内实现搜索并实时匹配选中选项

核心实现逻辑 #

不管用哪种方案，核心逻辑都是一致的：

• 捕获用户输入的搜索关键词
• 遍历所有待匹配的下拉选项，过滤出包含关键词的结果
• 实时更新下拉列表的展示内容，自动选中匹配度最高的选项

方案一：纯原生实现（无第三方依赖，用HTML5 datalist） #

这个方案不需要引入额外资源，直接用原生标签即可实现输入联想匹配效果，符合你的需求。

调整后的HTML代码 #

<div class="mb-3">
    <label class="form-label">Color</label>
    <!-- 把select换成可输入的input，绑定datalist -->
    <input type="text" class="form-control" list="colorList" id="colorInput" placeholder="在此输入搜索内容">
    <datalist id="colorList"></datalist>
</div>

调整后的JS代码 #

var arrayOfColors = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', 
          '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
          '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', 
          '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
          '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC', 
          '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
          '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680', 
          '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
          '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3', 
          '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];

var colorList = document.getElementById("colorList");
// 初始化所有选项
arrayOfColors.forEach(color => {
    const option = document.createElement('option');
    option.value = color;
    colorList.appendChild(option);
});

// 可选：添加输入自动选中逻辑
const colorInput = document.getElementById('colorInput');
colorInput.addEventListener('input', () => {
    const keyword = colorInput.value.trim().toLowerCase();
    if(!keyword) return;
    // 匹配第一个符合条件的颜色自动补全
    const matchedColor = arrayOfColors.find(color => color.toLowerCase().includes(keyword));
    if(matchedColor) {
        colorInput.value = matchedColor;
    }
})

方案二：基于Bootstrap组件快速实现 #

你当前代码已经用了Bootstrap的样式类，可以直接用适配Bootstrap的下拉选择组件，自带搜索功能，只需要少量配置即可生效，不需要手动写匹配逻辑：

• 引入对应组件的样式和脚本资源
• 给原有select标签添加data-live-search="true"属性
• 执行组件初始化代码即可，组件会自动完成搜索匹配、下拉展示、自动选中的所有逻辑

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