如何不在數據列表 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下的數據列表頁面上有一個很好的示例。