Searching By Inner Text With HTML Datalist

I am using a simple HTML5 datalist which serves as an autocomplete dropdownlist on a Chrome browser. The datalist I use is something like this:

Solution 1:

I suggest looking into typeahead.js. You can read up on it here. It's an extremely useful library for this kind of thing.

Looking at the website, all you would have to do is the following:

var options = ["Oranges", "Apples", "Bananas"];

$('#yourDropDownElement .typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
},
{
    name: 'fruit',
    displayKey: 'value',
    source: substringMatcher(options)
});

This does require jQuery, however.

Solution 2:

why don't you just replace value by your inner text? something like:

<input type="text" list="mylist">
<datalist id="mylist">
    <option value="Oranges" value2="123"></option>
     <option value="Apples" value2="2312"></option>
     <option value="Bananas" value2="33232"></option>
</datalist>

Solution 3:

1) Please define your options like that:

<option value="123" label="Oranges"/>

2) Depends on a browser: Firefox doesn't show values, while Chrome shows them as an additional info.