如何创建支持文本输入与选项选择的select下拉组合控件

可输入下拉选择框实现方案 #

方案1：datalist适配优化（轻量原生方案） #

你遇到的datalist显示问题是因为默认逻辑下input选中选项后会直接取option的value填充，如果你希望选中后显示选项文本、同时保留对应的value值，可以调整写法配合极少量JS实现：

<input type="text" list="existing-list" id="free-hand-dropdown" data-selected-value="">
<datalist id="existing-list">
    <option data-value="1">One</option>
    <option data-value="2">Two</option>
    <option data-value="3">Three</option>
</datalist>
<!-- 提交用的隐藏字段，也可以直接在提交逻辑里处理 -->
<input type="hidden" id="submit-value" name="submitValue">
<input type="hidden" id="submit-text" name="submitText">

配套的提交逻辑处理：

document.querySelector('form').addEventListener('submit', (e) => {
    e.preventDefault()
    const input = document.getElementById('free-hand-dropdown')
    const inputText = input.value.trim()
    let selectedValue = ''
    
    // 遍历datalist匹配是否是预设选项
    const options = document.querySelectorAll('#existing-list option')
    options.forEach(option => {
        if (option.textContent === inputText) {
            selectedValue = option.dataset.value
        }
    })
    
    // 赋值提交字段
    document.getElementById('submit-value').value = selectedValue
    document.getElementById('submit-text').value = inputText
    
    // selectedValue为空即为用户自定义输入的新条目，后续可自行处理提交逻辑
    console.log('提交值：', {value: selectedValue, text: inputText})
})

这个方案完全基于原生API，兼容性好，无需引入额外依赖，满足你区分预设选项和新输入条目的需求。

方案2：原生自定义combobox组件（交互更可控） #

如果需要更接近原生select的交互（比如点击展开下拉、不自动过滤选项等），可以自己封装简易的自定义组件，核心逻辑是用输入框+绝对定位的下拉选项列表实现，点击选项时填充输入框同时记录对应value，输入时如果不匹配预设选项就清空记录的value值即可，适配你需要的提交逻辑。

实现思路说明 #

你原本的判断逻辑是可行的：用是否存在预设value来区分新录入条目，只需要注意以下两点优化：

• 避免让用户输入的文本刚好和预设value重复导致误判，不要把预设value直接暴露在输入框的填充逻辑里
• 提交前增加文本去重校验，避免重复录入相同文本的新条目

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