如何不在数据列表 HTML5 中显示值？

Question

我想要实现的是从结果中隐藏价值。

<input list="search-results" value="userText" id="geocoder" autocomplete="off">
<datalist id="search-results">
    <option value="userText">Address 1</option>
    <option value="userText">Address 2</option>
    <option value="userText">Address 3</option>
</datalist>

https://jsfiddle.net/2w6hjgn8/2/

我需要在 datalist 中显示所有选项元素。 基本数据表 function 是通过用户输入过滤结果。 但我想以另一种方式使用它。

我正在创建实时搜索功能。 如果用户输入文本搜索 function 开始，提出请求并获得结果。 每个结果都是动态添加的 datalist 中的一个单独选项。 每个结果都包含一个我想显示的字段“display_name”。 不幸的是，“display_name”并不总是包含用户输入的确切文本。 数据集过滤结果并且不显示所有结果。 我的想法是在值字段中输入与用户输入相同的值 - 因此将显示所有结果。 不幸的是，数据集显示选项的值和 innerHTML。 有什么方法可以隐藏价值吗？

Answer 1

选项标签的 label 属性允许在某些浏览器上显示的文本和选项值之间发生变化。

<option value="aaa" label="xxx">

我发现在 Firefox 上，datalist 按选项显示的文本过滤，而在 Chrome 上，每个选项都按 label 和值显示和过滤。 您可以在您的目标浏览器上试一试： https://jsfiddle.net/Lyjwn0xs/1/

您按隐藏数据而不是显示数据进行过滤的目标似乎不适合 datalist 元素的默认浏览器功能，但您可以使用 JavaScript 自定义其行为。 MDN 在自定义数据列表 Styles下的数据列表页面上有一个很好的示例。