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);
        });
    }
});

Вот живая демонстрация .