Question

我有一个应用，其中用户键入单词并显示自动完成。当选择适当的自动完成时，它会被添加到input字段，并且用户会继续输入。我非常想在输入框中突出显示该单词（不在自动完成列表中）并且框中的其余单词不会突出显示，但我找不到任何示例此

$(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+如何突出显示用户名的方式使其看起来具有视觉上的独特性”。

Answer 1

由于您已经在使用jQuery，因此您可能希望使用类似jQuery Tags的内容。

它支持自动完成功能，并且可以实现您正在寻找的数据差异化。

基本概念是，您可以使用文本框并将其设为带有contenteditable标志的div。侦听keypress个事件 - 特别是空格键和回车键。当它们被击中时，您会抓取最近输入的文本（已经没有“标记”）并创建<div>并附加它。

或者只是使用插件......

突出显示自动填充输入框中的第一个单词

1 个答案: