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

【问题标题】：Searching by inner text with HTML datalist使用 HTML 数据列表按内部文本搜索
【发布时间】：2014-05-14 16:56:10
【问题描述】：

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

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

这是jsFiddle：

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

基本上，我想做的是：

1) 按内部文本搜索

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

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

【问题讨论】：

我对你想要发生的事情有点困惑......当你选择一个选项时，它会填充一个<input type="text" />。无论文本输入的value 是什么，这就是向用户显示的内容，也是提交的值。您是否希望在选择时在文本输入中显示Oranges，但提交了123？我不相信您可以通过文本输入来做到这一点。或者您是否希望显示和提交Oranges？如果是这种情况，只需从您的 <option> 元素中移除 value 属性即可。
如果您希望在文本输入中显示Oranges 并提交123，我能想到的唯一方法是在提交表单时使用JavaScript 更改值。在这种情况下，你可以只交换你的内部文本和你的值......哪个是哪个并不重要，因为无论如何你都会在提交时更改它。
问题是其他项目依赖于值字段，但我想我需要更改它。还是谢谢。

标签： javascript html autocomplete html-datalist

【解决方案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。

【讨论】：

感谢您的建议，但如果我能在不使用任何其他库的情况下获得结果，我会很高兴

【解决方案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>

【讨论】：

我无法替换它们，因为我已经有一个依赖于值字段的代码

【解决方案3】：

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

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

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

【讨论】：

如果您这样做，搜索仍将按值进行，因此无法回答问题。