用HTML数据列表内的文本搜索(Searching by inner text with HTML

我用一个简单的HTML5数据列表用作在Chrome浏览器自动完成下拉列表。 我使用的数据列表是这样的：

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

这里是一个的jsfiddle ：

问题是，当我开始键入一个值搜索是在价值上，而不是文字来完成。 还值显示给用户。

基本上，我想要做的是：

1）通过内部文本搜索

2）仅显示当用户观看DropDownList的选项内的文本。

我做了一些谷歌搜索，但没有找到一个答案非常简单的任务...

Answer 1:

我建议寻找到typeahead.js 。 你可以阅读它在这里 。 这是对这种事情非常有用的库。

综观网站，所有你需要做的是以下几点：

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

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

这确实需要jQuery的，但是。

Answer 2:

你为什么不只是你内心的文本替换价值？ 就像是：

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

Answer 3:

1）请确定您选择这样的：

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

2）依赖于浏览器：Firefox不显示值，而Chrome会显示他们作为附加信息。

文章来源: Searching by inner text with HTML datalist