Question

So I have an input which I integrated jQuery autocomplete. I don’t know how to explain this. I am trying to change the style of the text in the autocomplete if is typed, something like google has for its autocomplete:

Note that in the autocomplete, ‘stackover’ is lighter than the rest of the word.

This is the CSS which is used for the text: .ui-menu .ui-menu-item a

Does anyone know how to do this?

Thanks alot

Answer 1

You could subscribe for the open event and append a span around the matched term so that you could style it accordingly:

$('#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);
        });
    }
});

Here’s a live demo.