jQuery Autocomplete：根據字段中的文本更改文本樣式

Question

因此，我有一個集成了jQuery自動完成功能的輸入。 我不知道該怎么解釋。 我正在嘗試更改自動填充中文本的樣式（如果輸入的話），例如Google對於其自動填充：

請注意，在自動完成功能中，“ 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);
        });
    }
});

這是現場演示 。