Question

I’m using Jquery autocomplete for Google suggestions. I would like to make the li items in the autocomplete suggestions bold if they match the value of input. I first tried to do this with an event but I realized that the event would be triggered after the request so that wouldn’t work. So now I’m trying to make font bold right in the autocomplete with:

var val = $('#searchbox').val();

    if (val == $(item.suggestion.data).html()) {
      $(item.suggestion.data).css("font-weight", "bold");
    } 

This doesn’t seem to work and I can’t figure out why. Here is an example of the autocomplete: JsFiddle

Answer 1

You can use the autocomplete’s open event to match the input text against the values returned in the autocomplete’s drop down list.

open: function(event, ui) {
    $('.ui-menu li a').each(function(){
    if($(this).text()==$('#searchbox').val()) $(this).wrap('<strong>');
    });
}

jsFiddle example.