如何不在 datalist HTML5 中显示值？答案

【问题标题】：How NOT to display value in datalist HTML5?如何不在 datalist HTML5 中显示值？
【发布时间】：2020-11-28 20:20:54
【问题描述】：

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

<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 中显示所有选项元素。基本数据列表功能是通过用户输入过滤结果。但我想以另一种方式使用它。

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

【问题讨论】：

如果你不想过滤，为什么要使用数据集呢？听起来你想要一个
我不熟悉前端技术。我需要看起来像这样的东西：jsfiddle.net/2gc6mtb5/14 但我不知道如何使用

标签： javascript html

【解决方案1】：

option 标签的 label 属性允许在某些浏览器上显示的文本和选项值之间存在差异。

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

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

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

【讨论】：