How NOT to display value in datalist HTML5?

Question

What I want to achieve is to hide the value from results.

<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/

I need to show all option elements in datalist. Basic datalist function is to filter results by user input. But I want to use it another way.

I am creating live search functionality. If user enter text the search function starts, makes request and get the results. Each result is a separate option in datalist which is added dynamically. Every result includes a field "display_name" which I would like to display. Unfortunately, "display_name" does not always contain the exact text entered by the user. Dataset filters the result and does not show all of them. My idea is to enter the same value in the value field as user entered - so all results will be displayed. Unfortunately, dataset displays option's value and innerHTML. Is there any way to hide value?

Answer 1

The label attribute of the option tag allows variation between the displayed text and the option's value on some browsers.

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

I found that on Firefox the datalist filters by the option's displayed text, whereas on Chrome each option displays and filters by both the label and the value. You can give it a try on your target browsers here: https://jsfiddle.net/Lyjwn0xs/1/

Your goal of filtering by hidden data as opposed to the displayed data doesn't seem to fit the default browser functionality of the datalist element, but you can customize its behavior using JavaScript. MDN has a good example of this on the datalist page under Customizing Datalist Styles .