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:

<datalist id="mylist">
    <option value="123">Oranges</option>
     <option value="2312">Apples</option>
     <option value="33232">Bananas</option>
</datalist>

here is a jsFiddle:

The problem is that when I start to type a value the search is done on the value instead on the text. Also the value is displayed to the user.

Basically, what I want to do is:

1) Search by inner text

2) Display only the inner text when the user views the dropdownlist's options.

I did a few Google searches, but could not find an answer to this very simple task...

回答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.

回答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>