如何为同一输入框中的字符设置不同的字体权重

Question

我需要创建一个具有自动完成功能的输入框。因此，当用户输入“ja”时，前两个字符将以粗体显示，“vascript”将为灰色。 由于某些原因，我无法使用jquery自动完成功能。由于用户可以输入的字数不是很多，我创建了一个数组并为每个缩写指定了匹配的单词。

words= [{abbv:"J", word="JAVA"}, {abbv:"JA", word:"JAVASCRIPT"}] 

然后，当用户开始输入单词时，我在数组中查找与“缩写”匹配的单词，并在框内显示该单词。 这很好用，现在的问题是我试图突出显示用户输入的第一个字符，并将其余字词保持为灰色。 我想要做的就是这个http://jsfiddle.net/wyVJW/894/，除了我希望这个词显示在输入框内部而不是在向下滚动菜单中。 如何仅在输入的字符上设置字体粗细，而不是在整个输入框上设置字体粗细？

Answer 1

输入框不支持多种样式。您需要覆盖DIV并在该DIV中使用HTML来“模拟”您想要实现的内容，并使用CSS使其看起来仍然像输入框一样。

您需要编写一些JavaScript才能使其正常工作。