自定义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。

P.S。 - 我根据文本字段中的用户输入从Ajax Call动态生成此datalist。另外，我不能使用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);

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

有关详细信息，请参阅此link.