使用HTML数据列表按内部文本搜索

Question

我正在使用一个简单的HTML5数据列表，它在Chrome浏览器上充当一个自动完成的下拉列表。我使用的数据列表如下所示：

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

下面是一个JSFIDLE：

问题是，当我开始键入一个值时，搜索是在值上完成的，而不是在文本上。还向用户显示该值。

基本上，我想做的是：

1） 按内部文本搜索

2） 当用户查看dropdownlist的选项时，仅显示内部文本。

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

Answer 1

1） 请这样定义您的选项：

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

2） 取决于浏览器：Firefox不显示值，而Chrome将其显示为附加信息。

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

我建议查看typeahead.js。你可以在这里读到它。这是一个非常有用的图书馆。

查看该网站，您只需执行以下操作：

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

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

但是，这确实需要jQuery。