CODEWITHSUNDEEP
jqueryjquery-uiautocomplete
apolka
apolka

Reputation: 1721

How to make matched text bold with jquery ui autocomplete?

I am wondering how to make the matched part of the autocomplete suggestions bold when using jquery ui autocomplete?

So for example if you type in "ja" and the suggestions are javascript and java (like in the example on the jquery ui demo page) then I would like to make "ja" bold in both suggestions.

Anyone knows how to do that?

Thanks a lot for the help...

Upvotes: 24

Views: 32535

Answers (5)

SachinV
SachinV

Reputation: 231

If you are using jquery-ui.js:

acData = $(this).data('autocomplete');// will not work 
//instead use 
acData = $(this).data('uiAutocomplete');

Upvotes: 23

Henry Ruhs
Henry Ruhs

Reputation: 1630

In jQuery UI 1.9.x this solution did not work for me because acData was undefined - the data reference timing was wrong because I init my PluginHelper before the document ready.

I came up to mod the _renderItem using jQuery UIs widget factory:

$.widget("custom.autocompleteHighlight", $.ui.autocomplete, {
    _renderItem: function (ul, item) {
        var regexp = new RegExp('(' + this.term + ')', 'gi'),
            classString = this.options.HighlightClass ?  ' class="' + this.options.highlightClass + '"' : '',
            label = item.label.replace(regexp, '<span' + classString + '>$1</span>');

        return $('<li><a href="#">' + label + '</a></li>').appendTo(ul);
    }
});

You now can use it with:

$('input.jsAutocompleteHighlight').autocompleteHighlight({
        highlightClass: 'ui-autocomplete-highlight'
});

CSS styling:

.ui-autocomplete-highlight {
    font-weight: bold;
}

Upvotes: 4

Frederic
Frederic

Reputation: 2094

In jQuery UI 1.11.1, here is the code I used to make it work (case insensitive):

open: function (e, ui) {
    var acData = $(this).data('ui-autocomplete');
    acData
    .menu
    .element
    .find('li')
    .each(function () {
        var me = $(this);
        var keywords = acData.term.split(' ').join('|');
        me.text(me.text().replace(new RegExp("(" + keywords + ")", "gi"), '<b>$1</b>'));
     });
 }

Upvotes: 40

peol
peol

Reputation: 872

I'm not sure why the autocomplete is so bare-bone compared to the other functionalities it contains (e.g. droppable, sortable, draggable etc.).

It should really offer you with a stylable option, e.g. wrapping it with <span class="ui-autocomplete-term">term</span> or something similar.

You could do it like this

It should be pretty self-explanatory; if not, gimme a shout.

Upvotes: 42

brechtvhb
brechtvhb

Reputation: 1048

Here's a solution for those who want to search case insensitive (only the open function is diffirent):

        open: function(e,ui) {
            var
            acData = $(this).data('autocomplete');

            acData
            .menu
            .element
            .find('a')
            .each(function() {
                var me = $(this);
                var regex = new RegExp(acData.term, "gi");
                me.html( me.text().replace(regex, function (matched) {
                    return termTemplate.replace('%s', matched);
                }) );
            });
        }

Upvotes: 20

Related Questions