我正在使用一个简单的 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 搜索,但找不到这个非常简单的任务的答案...
最佳答案
我建议查看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。
关于javascript - 使用 HTML 数据列表按内部文本搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22827875/