jQuery自动完成：根据字段中的文本更改文本样式

Question

所以我有一个输入，我集成了jQuery自动完成功能。我不知道怎么解释这个。我正在尝试更改自动填充中文本的样式，如果输入的话，就像谷歌的自动完成一样：

请注意，在自动填充中，“stackover”比单词的其余部分轻。

这是用于文本的CSS：.ui-menu .ui-menu-item a

有谁知道怎么做？

非常感谢

Answer 1

您可以订阅open事件并在匹配的字词周围附加一个范围，以便您可以相应地设置样式：

$('#q').autocomplete({
    source: ['stackoverflow', 'stackoverflow careers', 'stackoverflowerror', 'stackoverflow api', 'stackoverflow podcast'],
    open: function(e, ui) {
        var data = $(this).data('autocomplete');            
        data.menu.element.find('li').each(function() {
            var $this = $(this);
            var matched = data.term;
            var rest = $this.text().replace(matched, '');
            var template = $('<span/>', {
                'class': 'ui-found',
                'text': matched
            }).after($('<span/>', {
                'text': rest    
            }));
            $this.html(template);
        });
    }
});

这是live demo。