输入元素文本预测

Question

许多网站会以下拉菜单的形式显示有关您输入内容的建议，有些网站会以较浅渐变字体的光标右侧的“预览”形式显示最有可能的结果。

例如（这是来自我 Mac 上的 Spotlight）：

聚焦文字建议

有没有办法在标准的 HTML 输入元素中重现这一点，还是需要更复杂的富文本（例如Slate）方法？

Answer 1

很遗憾，这无法通过input 标签实现。

但是，有几种方法可以做到这一点。

Slate 是一种选择，但我认为您可以更轻松地制作一些东西。

例如，您可以使用属性contenteditable 创建一个<div>。当您键入时，div 会展开，并且在“输入 div”之后放置另一个具有自动完成结果的元素。

无论哪种方式，您都肯定需要 JS 来实现这一点。拼接字符串或查看可能的结果。如果你还有这个问题，我可以写一个smapp codepen demo。