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

Question

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

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

这是一个jsFiddle：

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

基本上，我想做的是：

1) 按内部文本搜索

2) 当用户查看下拉列表的选项时，只显示内部文本。

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

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 将它们显示为附加信息。