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

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

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

然后，当用户开始输入单词时，我在数组中查找与“缩写”匹配的单词，并在框中显示该单词。 这很好，现在的问题是，我试图突出显示用户输入的第一个字符，并将单词的其余部分保持为灰色。 我试图做的事情看起来是这样的，除了我希望单词显示在输入框中，而不是在向下滚动菜单中。

---

如何仅在输入的字符上设置字体权重，而不在整个输入框上设置字体权重？

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

---

您需要编写一些JavaScript来实现这一点。

使用JavaScript！：）由于这仅通过css是不可能的，我正在使用javascriptoverlay在输入下面显示建议的文本容器：？事实上，我希望建议可以很容易地显示在输入框中（就像在google上进行研究时），并且您不需要JS，只需要HTML：在输入上使用list属性，并将其指向包含您的建议的datalist标记。