突出显示自动完成输入框中的第一个单词答案

【问题标题】：Highlight first word in autocomplete input box突出显示自动完成输入框中的第一个单词
【发布时间】：2012-06-19 20:56:13
【问题描述】：

我有一个应用程序，用户在其中输入一个单词并出现一个自动完成功能。 When the select the appropriate autocomplete, it's added to the input field and the user keeps typing.我非常想在 输入框 （不在自动完成列表中）中突出显示该单词，并让框中的其余单词不突出显示，但我找不到任何示例这个。

$(searchBoxId).autocomplete({
    source:      keys,
    delay:       0,
    selectFirst: true,
    select:      function(event, ui) {
        var TABKEY = 9;
        this.value = ui.item.value;

        if (event.keyCode == TABKEY) {
            event.preventDefault();
            this.value = this.value + " ";
            // XXX something goes here?
            this.focus();
        }

        return false;
    },
    autoFocus: true,
    minLength: 2
});

这是 jquery 1.8.20。我所说的“突出显示”是指“能够以类似于 Facebook 或 Google+ 突出显示用户名的方式使其在视觉上与众不同”。

【问题讨论】：

jQuery wrap selected text in a textarea的可能重复
或者可能是stackoverflow.com/questions/646611/…
马克，不幸的是，两者都不是重复的。第一个在输入字段中嵌入原始 HTML，第二个在输入字段中选择文本。不过，感谢您的指点。
我认为除了这两个选项之外，您不会找到任何其他方法。另一个“选项”是在文本输入上放置一个 div 并以这种方式突出显示您想要突出显示的文本，但这不是您所要求的。

标签： javascript jquery autocomplete

【解决方案1】：

由于您已经在使用 jQuery，您可能希望使用 jQuery Tags 之类的东西。

它支持自动完成并执行您正在寻找的数据差异化。

基本概念是您将文本框设置为带有contenteditable 标志的div。监听keypress 事件——特别是空格键和回车键。当它们被击中时，您获取最近输入的文本（尚未“标记”）并创建一个 <div> 并附加它。

或者只是使用插件...

【讨论】：