使用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，應顯示聖何塞和波士頓，因為聖何塞是我的默認值，波士頓是輸入框中的過濾值。

這可能嗎 ？ 如果沒有，實現相同結果的替代方法是什么？

的jsfiddle

如果需要，我可以使用Javascript / Jquery。 但是，我不能使用任何自動完成插件。

Answer 1

如果不使用自定義插件，這是不可能的。 datalist支持最多仍然是平庸的，目前沒有辦法影響顯示的選項。

有一些瀏覽器實現差異甚至不會受到影響（Chrome僅在選項開始時匹配，FireFox也匹配其中任何其他內容的文本）。 沒有辦法改變這一點，更不用說添加自定義方式來顯示某些建議。