javascript - HTML 输入自动填充占位符

Question

当用户写入文本框时显示用户建议的最佳方法是什么？我在 JS 数组中有所有可能的值。以数组 ["TYPO3", "Javascript"] 为例.现在如果用户输入这样一个字符串的起始字符，他应该得到这样的建议:

我很清楚 placeholder html5 标签，但这只有在文本框为空时才有效。我也知道 Datalist element或 jQuery autocomplete但这些只允许特定值。我还希望我的文本框中没有预定义的内容。

我的想法是添加一个 <span>在光标之后标记，在输入 keyup 事件时更改其内容并将跨度移动到光标当前所在的位置。这也使我可以设置建议文本的样式。

但对我来说这似乎是一个糟糕的 hack，那么有没有更干净的解决方案呢？

Answer 1

我无法告诉您什么是最佳方法，但如果您相信 Google 的方法，那么他们的解决方案非常简单:

• 有一个常规文本框 ( <input type='text' ...> ) 用于实际输入。
• sibling <input>元素 disabled .

实际的文本框应该在禁用的文本框之上。当用户开始输入并且您找到了自动完成的匹配项时，建议的文本应变为 value另一个disabled输入元素(建议文本应为银色)。

这是一个小例子:https://jsfiddle.net/e3L93o7g/