How to make matched text bold with jquery ui autocomplete?

Question

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...

Answer 1

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.

Answer 2

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