How to make matched text bold with jquery ui autocomplete?

Question

Dear All,

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.

Anywho, you could do it like this: http://jsfiddle.net/wyVJW/

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