主页 / coding / 问题 / 78310806
Accepted
Ian Boyd
Asked: 2024-04-11 21:45:55 +0800 CST

如何在 HTML 中创建组合框？

  • 772

简洁版本

如何在 HTML 中制作组合框？

长版

如何使用 HTML 中的默认文本创建可编辑的下拉列表？

也就是说：

  • 用户可以输入的文本框
  • 或者他们可以单击（或Alt+ Down）以显示下拉菜单
  • 并选择一些预定义的文本
  • 而文本框默认为一些有用的默认值，但（不一定）出现在列表中

类似于标准的 Windows Combo Box控件或 WinForms ComboBox：

在此输入图像描述

研究工作

我尝试过以下 HTML：

<input id="edPhrase" list="phrases" value="Hello, world!">
<datalist id="phrases">
  <option value="Good morning Vietnam">Good morning Vietnam</option>
  <option value="Stay classy San Francisco">Stay classy San Francisco</option>
  <option value="Cleaveland Rocks">Cleaveland Rocks</option>
  <option value="I see dead people">I see dead people</option>
  <option value="Guess who's drunk">Guess who's drunk</option>
</datalist>

但没有出现下拉菜单：

在此输入图像描述

如果用户删除现有文本，则会出现下拉菜单：

在此输入图像描述

这样就违背了下拉菜单的全部目的。

这就引出了我们的问题：

如何在 HTML 中制作组合框？

完整的最小可重复示例 (CRME)

因此，您可以尝试摆弄它以使其在您的沙箱中工作：

html

2 个回答

  1. Best Answer

    没有原生 HTML 方法可以实现这一点，您需要一些自定义 Javascript 来显示<datalist>所有选项，或者在<select>

    使用placeholder上<input>将确保所有选项都显示在 内<datalist>，这将在键入函数时保留过滤器，但您将无法“选择”占位符。

    <input type="text" list="cars" placeholder="Choose..." />
<datalist id="cars">
    <option>Volvo</option>
    <option>Saab</option>
    <option>Mercedes</option>
    <option>Audi</option>
</datalist>

    如果还不够的话，有一些技巧可以让datalist始终使用（例如）blur()事件显示每个可用的输入：placeholder

    • 2

  2. 您需要 JavaScript 来删除或聚焦并选择，他们可以开始输入，这将打开他们输入内容的下拉列表，假设他们输入的字母出现在数据列表中

    document.getElementById('edPhrase').addEventListener('click', (e) => {
  const input = e.target;
  input.value = "";
});
/* Perhaps not
document.getElementById('edPhrase').addEventListener('blur', (e) => {
  const input = e.target;
  if (input.value.trim() === "") input.value=input.defaultValue;
});
*/
document.getElementById('edPhrase').addEventListener('change', (e) => {
  const input = e.target;
  if (input.value.trim() !== "") input.defaultValue=input.value;
});
    <input id="edPhrase" list="phrases" value="Hello, world!">
<datalist id="phrases">
  <option value="Good morning Vietnam">Good morning Vietnam</option>
  <option value="Stay classy San Francisco">Stay classy San Francisco</option>
  <option value="Cleaveland Rocks">Cleaveland Rocks</option>
  <option value="I see dead people">I see dead people</option>
  <option value="Guess who's drunk">Guess who's drunk</option>
</datalist>

    document.getElementById('edPhrase').addEventListener('click', (e) => {
  const input = e.target;
  input.focus();
  input.select();
})
    <input id="edPhrase" list="phrases" value="Hello, world!">
<datalist id="phrases">
  <option value="Good morning Vietnam">Good morning Vietnam</option>
  <option value="Stay classy San Francisco">Stay classy San Francisco</option>
  <option value="Cleaveland Rocks">Cleaveland Rocks</option>
  <option value="I see dead people">I see dead people</option>
  <option value="Guess who's drunk">Guess who's drunk</option>
</datalist>

    或者搜索小部件

    • 0

相关问题