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) 当用户查看下拉列表的选项时仅显示内部文本。

我进行了一些 Google 搜索，但找不到这个非常简单的任务的答案...

Answer 1

我建议查看typeahead.js。您可以阅读它 here 。对于此类事情来说，这是一个非常有用的库。

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

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

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

但是，这确实需要 jQuery。