使用 html5 数据列表自定义自动完成

Question

我正在使用 html 数据列表自动填充一些数据。我想要一种行为，它应该过滤除一个默认值之外的所有内容。下面是示例代码：

<input type="text" list="mylist"/>
<datalist id="mylist">
    <option value="San Jose"></option>
    <option value="San Francisco"></option>
    <option value="New York"></option>
    <option value="Chicago"></option>
    <option value="Boston"></option>
    <option value="Los Angeles"></option>
</datalist>

在上面的事情中，默认情况下，如果我输入 s，它只会显示 San Jose 和 San Francisco，当我输入 n 时，它只会显示 New York。

我的要求是，在任何情况下，无论键入什么，它都应始终显示 San Jose（默认情况下），然后过滤其余元素。

示例：键入 B，应该同时显示 San Jose 和 Boston，因为 San Jose 是我的默认值，而 Boston 是输入框上的过滤值。

这可能吗？如果不是，有哪些替代方法可以达到相同的结果？

JSFiddle

如果需要，我可以使用 Javascript/Jquery。但是，我无法使用任何自动完成插件。

Answer 1

如果不使用自定义插件，这是不可能的。 datalist 支持充其量仍然是中等水平，目前没有办法影响显示的选项。

有些浏览器实现差异甚至不会受到影响（Chrome 仅匹配选项的开头，FireFox 也匹配其中其他任何位置的文本）。没有办法改变这一点，更不用说添加自定义方式来显示某些建议了。

使用 html5 数据列表自定义自动完成

Custom Autocomplete with html5 datalist

html

javascript

jquery

html-datalist