使用html5 datalist自定义自动完成功能

Question

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

<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，它将仅显示圣何塞和旧金山，当我键入n时，它将仅显示纽约。

我的要求是，无论如何，无论输入什么，它都应该始终显示圣何塞（默认情况下），然后过滤其余的元素。

示例：键入B，应显示San Jose和Boston两者，因为San Jose是我的默认值，Boston是输入框中的过滤值。

这可能吗？如果没有，实现相同结果的替代方法是什么？

JSFiddle

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

Answer 1

如果不使用自定义插件，则无法进行此操作。 datalist支持仍然充其量只是平庸，目前没有办法影响所显示的选项。

有一些浏览器实施差异甚至无法受到影响（Chrome仅在选项开始时匹配，FireFox也会匹配其中任何其他内容的文本）。没有办法改变这种情况，更不用说添加自定义方式来显示某些建议。