如何强制展开HTML datalist 解决删除输入字符时下拉列表折叠问题

绑定了datalist的文本输入框存在如下异常交互：

• 输入1111时，匹配值下拉列表可正常展开
• 删除输入内容中除最后一个字符外的任意字符时，下拉列表会自动折叠，视觉上呈现无匹配值的状态
• 上述折叠状态下手动触发列表展开，可见实际匹配结果计算正确
  需求为修复该异常折叠问题，或实现下拉列表强制保持展开。

<input type="text" list="int"> 
<datalist id="int">
  <option>1</option>
  <option>11</option>
  <option>111</option>
  <option>1111</option>
  <option>11111</option>
  <option>111111</option>
</datalist>

该问题是Chromium内核浏览器存在多年的原生datalist实现bug，且原生datalist的下拉UI由浏览器自身控制，没有暴露DOM层面的展开/折叠控制API，无法直接通过JS强制设置展开状态，只能通过触发浏览器重绘、重绑定逻辑绕过该bug。

方案1：输入变更时触发焦点重置 #

监听输入框的input事件，每次内容变化时先让输入框短暂失焦再重新聚焦，触发浏览器重新校验匹配项、重置下拉列表状态，修复异常折叠问题。
实现代码：

<input type="text" list="int" id="numInput"> 
<datalist id="int">
  <option>1</option>
  <option>11</option>
  <option>111</option>
  <option>1111</option>
  <option>11111</option>
  <option>111111</option>
</datalist>
<script>
const input = document.getElementById('numInput');
input.addEventListener('input', () => {
  input.blur();
  setTimeout(() => input.focus(), 0);
});
</script>

注意：该方案实现成本最低、兼容性最好，但输入时会有极短暂的失焦，可能对部分自定义输入法、光标特效产生轻微影响。

方案2：动态重绑datalist关联 #

每次输入内容变化时，临时移除输入框的list属性，再重新绑定对应datalist的ID，强制浏览器重新渲染下拉选项列表，不会触发输入框失焦，对输入流程干扰更小。
实现代码：

const input = document.getElementById('numInput');
const bindDatalistId = 'int';
input.addEventListener('input', () => {
  input.removeAttribute('list');
  setTimeout(() => input.setAttribute('list', bindDatalistId), 0);
});

方案3：自定义联想下拉组件 #

如果对交互一致性、样式自定义有较高要求，可直接弃用原生datalist，基于普通DOM元素实现自定义联想下拉组件，完全自主控制展开折叠逻辑、选项渲染规则，不存在原生组件的bug，缺点是实现成本相对更高。

内容的提问来源于stack exchange，提问作者Анатолий П