自定义 html datalist 下拉菜单

Question

我想自定义 datalist 下拉菜单的显示方式。我现在有以下数据列表

<input type="text" id="employee" list="employee">
<datalist id="employee">
    <option value="John Doe">John Doe (ID: 1)</option>
    <option value="Jane Doe">Jane Doe (ID: 2)</option>
    <option value="John Jane">John Jane (ID: 3)</option>
</datalist>

当我在输入框中输入时，我看到这样的输出

但我的要求是让它看起来像下面和

选择下拉菜单时，只应选择名称（不带 id）。像这样的：

我该怎么做？基本上我想在下拉列表中显示更多详细信息，但只选择名称而不是提交表单的 ID。另外，我不希望下拉列表中有 2 列（更暗和更亮）。我只想要更多信息的价值。

这是我用于此问题的JSFiddle。

附： - 我根据文本字段中的用户输入从 Ajax 调用动态生成此数据列表。另外，我不能使用 jquery 来操作任何东西。它必须是原生 javascript。

Answer 1

出现第二列是因为您将内容放在开始标签和结束标签之间。 更改：

<option value="John Doe">John Doe (ID: 1)</option>

收件人：

<option value="John Doe"></option>

删除第二列。

这可以在通过 AJAX 调用接收数据时完成，只需在 JavaScript 中创建选项：

var option = document.createElement("option");
option.value = name + " (ID: " + id + ")";
document.getElementById("my-datalist").appendChild(option);

上面的代码将创建一列，但是，它在 value 字段中包含 ID。如果您不希望它与表单一起提交，则必须在提交之前将其删除。或者您可以有两列，一列用于名称（值属性），另一列用于 ID（文本内容）。

欲了解更多信息，请参阅此link.