javascript - 自定义 html 数据列表下拉列表

Question

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

<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 列(较深和较浅)。我只想要更多信息的值(value)。

这是 JSFiddle我用它来回答这个问题。

附言- 我根据文本字段中的用户输入从 Ajax 调用动态生成此数据列表。另外，我不能使用 jquery 来操作任何东西。它必须是 native 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.