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。你可以阅读它here。对于这类事情来说，它是一个非常有用的库。

查看网站，您需要做的就是：

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

使用HTML datalist通过内部文本进行搜索

3 个答案: