如何隐藏datalist下拉选项的value值仅展示对应文本内容

原生<datalist>的内置下拉渲染逻辑不受CSS控制，当<option>同时配置value属性和内部文本时，多数浏览器会在下拉项中同时展示两者，选中后输入框也会直接填充value值，不存在原生配置项可以隐藏下拉中的value展示。

之前尝试用data-value替换原生value失效的原因很简单：datalist的搜索匹配、选项选中逻辑只识别原生value属性，自定义data-*属性不会被原生组件纳入识别范围，自然无法正常工作。

不需要更换实现方案，保留原生datalist的可搜索能力，只需要调整属性存放逻辑即可实现需求：

• 将<option>的value属性设置为需要展示给用户的文本内容，保证下拉展示、搜索匹配都基于用户可见的文本
• 将需要关联的业务标识（示例中是对应div的id）存放在data-value自定义属性上
• 选中选项时，先匹配到对应的option元素，从data-value上取实际业务标识再做后续逻辑

修正后完整代码 #

CSS（无修改） #

.hidden {
  display: none;
}

HTML #

<fieldset>
    <legend>This is a datalist</legend>
    <input type="text" id="example" list="brow" />
    <datalist id="brow">
        <option data-value="div1">Choice 1</option>
        <option data-value="div2">Choice 2</option>
    </datalist>
</fieldset>

<div class="hidden" id="div1">This is div1</div>
<div class="hidden" id="div2">This is div2</div>

JavaScript #

const myinput = document.getElementById('example');
const contentDivs = document.querySelectorAll('.hidden');
const datalistOptions = document.querySelectorAll('#brow option');

// 用input事件替代change，输入匹配时即时触发，无需等失焦
myinput.addEventListener('input', function() {
  const currentVal = this.value.trim();
  // 匹配和输入内容完全一致的选项
  const matchedOption = Array.from(datalistOptions).find(opt => opt.value === currentVal);
  
  if (!matchedOption) {
    // 输入内容不匹配任何选项时，隐藏所有内容块
    contentDivs.forEach(div => div.style.display = 'none');
    return;
  }

  const targetDivId = matchedOption.dataset.value;
  contentDivs.forEach(div => {
    div.style.display = div.id === targetDivId ? 'block' : 'none';
  });
});

方案说明 #

• 下拉列表全程只展示用户可见的选项文本，不会暴露内部关联的业务id
• 完全保留原生datalist的模糊搜索、键盘选择等默认交互，不需要引入第三方组件
• 兼容所有支持datalist的现代浏览器，不存在样式兼容问题

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