HTML輸入自動填充佔位符

Question

在寫入文本框時向用戶顯示建議的最佳方法是什麼？我有一個JS數組中的所有可能的值。以陣列["TYPO3", "Javascript"]爲例。現在，如果用戶輸入這樣的字符串的字符開始，他應該得到這樣的建議：

我很清楚的placeholder HTML5標籤，但這只是工作，如果文本框爲空。我也知道Datalist element或jQuery autocomplete但這些只允許特定的值。我還希望我的文本框中的內容不是預定義的。

我的想法是在光標後面添加一個<span>標記，在輸入關鍵事件時更改其內容，並將跨度移動到當前光標所在的位置。這也可以讓我對建議文本進行設計。

但對我來說這似乎是一個糟糕的黑客攻擊，那麼是否有更清晰的解決方案？

Answer 1

我不能告訴你什麼是最好的辦法，但如果您信任谷歌的做法，那麼他們的解決方案是非常簡單的：

• 有實際輸入一個普通的文本框（<input type='text' ...>） 。
• 兄弟<input>元素是disabled。

實際的文本框應該在禁用之上。 當用戶開始輸入內容並找到自動填充的匹配項時，建議的文本應該變爲另一個disabled輸入元素的value（建議的文本應爲銀色）。

這裏有一個小例子：https://jsfiddle.net/e3L93o7g/