如何实现表单中datalist选项列表始终显示而非点击input触发？

原生的<datalist>无法强制让下拉列表始终显示——它的弹出逻辑由浏览器原生控件控制，只有当输入框获得焦点、或输入内容匹配选项时才会触发显示。要实现始终可见的下拉列表，你可以用以下两种替代方案：

方案1：使用带size属性的<select> #

如果只需要用户选择预设选项，直接给<select>添加size属性（值设为选项的数量），它就会变成一个始终展开的列表框。如果需要支持自定义输入，搭配一个文本输入框即可：

<form action="/action_page.php" method="get">
  <label for="browser">Choose your browser from the list:</label>
  <!-- 可选：用于自定义输入的文本框 -->
  <input type="text" name="browser_custom" id="browser_custom" placeholder="Or enter custom browser">
  <!-- size设为选项数，让列表始终展开 -->
  <select name="browser" id="browser" size="5">
    <option value="Edge">Edge</option>
    <option value="Firefox">Firefox</option>
    <option value="Chrome">Chrome</option>
    <option value="Opera">Opera</option>
    <option value="Safari">Safari</option>
  </select>
  <input type="submit">
</form>

方案2：自定义可控列表（支持输入过滤） #

如果需要保留原<datalist>的输入过滤功能，同时让列表始终显示，可以用HTML+CSS+JS实现自定义控件，完全控制样式和交互：

<form action="/action_page.php" method="get">
  <label for="browser">Choose your browser from the list:</label>
  <input type="text" id="browserInput" name="browser" placeholder="Type to filter">
  <!-- 始终显示的自定义选项列表 -->
  <ul id="browserList" style="list-style: none; padding: 0; border: 1px solid #ccc; margin: 0;">
    <li style="padding: 4px 8px; cursor: pointer;" data-value="Edge">Edge</li>
    <li style="padding: 4px 8px; cursor: pointer;" data-value="Firefox">Firefox</li>
    <li style="padding: 4px 8px; cursor: pointer;" data-value="Chrome">Chrome</li>
    <li style="padding: 4px 8px; cursor: pointer;" data-value="Opera">Opera</li>
    <li style="padding: 4px 8px; cursor: pointer;" data-value="Safari">Safari</li>
  </ul>
  <input type="submit">
</form>

<script>
const input = document.getElementById('browserInput');
const listItems = document.querySelectorAll('#browserList li');

// 点击选项填充输入框
listItems.forEach(item => {
  item.addEventListener('click', () => {
    input.value = item.dataset.value;
  });
});

// 输入时过滤选项
input.addEventListener('input', () => {
  const filter = input.value.toLowerCase();
  listItems.forEach(item => {
    const text = item.textContent.toLowerCase();
    item.style.display = text.includes(filter) ? 'block' : 'none';
  });
});
</script>

方案对比 #

• 方案1依赖原生控件，代码简单、兼容性好，但自定义空间有限；
• 方案2完全自定义，样式和行为可控，适合需要复杂交互的场景，但需要额外编写JS逻辑。

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