带默认值的datalist绑定HTML input如何点击显示备选选项

这不是你写的代码有bug，是原生<datalist>组件的内置交互规则：绑定datalist的输入框存在非空值时，浏览器默认只会筛选展示和当前值匹配的候选项。如果你给输入框设置的默认值（比如value="USD"）刚好完全匹配datalist里的某一个选项，筛选结果就只有这一项，不少Chromium内核的浏览器会直接判定“当前已选中有效选项，无需展开完整列表”，最终表现就是下拉列表完全隐藏，用户看不到其他可选值。
目前HTML标准里没有提供任何原生配置项可以修改这个默认逻辑，你翻文档找不到对应配置是正常的，不是你漏看了内容。

• 无JS轻量方案：不要给input硬写value属性，把高频默认选项放到datalist列表的第一位，给input加对应placeholder做提示即可。缺点是输入框初始状态为空，用户需要点击展开后选择第一个默认项。
• 兼顾默认值展示和全量选项的JS方案：初始给input赋值默认值，监听输入框的聚焦事件，临时清空输入值触发浏览器渲染全量选项列表，渲染完成后再把原值填回去，不影响已选内容。参考实现：

<input type="text" list="currencyOptions" id="currencySelect">
<datalist id="currencyOptions">
  <option value="USD">美元</option>
  <option value="CNY">人民币</option>
  <option value="EUR">欧元</option>
  <option value="JPY">日元</option>
</datalist>

<script>
const currencyInput = document.getElementById('currencySelect')
// 初始化默认值
currencyInput.value = 'USD'

currencyInput.addEventListener('focus', () => {
  const savedValue = currencyInput.value
  // 临时清空值触发全量列表加载
  currencyInput.value = ''
  setTimeout(() => {
    currencyInput.value = savedValue
    // 触发输入事件适配部分浏览器的匹配逻辑
    currencyInput.dispatchEvent(new Event('input'))
  }, 0)
})
</script>

• 自定义触发按钮方案：如果需要更明确的下拉交互，可以在输入框旁加个下拉箭头按钮，点击按钮时先触发输入框聚焦，再执行上面的清空-还原逻辑强制展开列表，体验更接近传统select组件。

注意：不要尝试修改datalist的原生属性来实现这个效果，目前所有主流浏览器都没有开放对应控制接口，上面的轻量逻辑hack是目前成本最低的实现方式，兼容所有支持datalist的浏览器版本。

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