Question

How can I make my jquery autocomplete highlight what the user is typing in in any autocompleted results? The code I am using is:

    $("#keyword").autocomplete({ 
        source: "ajax/autocomplete.php?action=keyword", 
        minLength: 2 
    });

Tried this implemented from the link tomasz posted:

    $("#keyword").autocomplete({ 
        source: "ajax/autocomplete.php?action=keyword", 
        highlight: function(value, term) { 
    return value.replace(new RegExp("("+term+")", "gi"),'<b>$1</b>'); 
    },
        minLength: 2 
    });

No luck there either. jQuery autocomplete seems to hate me.

Update: Thanks to David Murdoch, I now have an answer! See @Herman’s copy of the answer below.

Answer 1

Thanks goes to David Murdoch at http://www.vervestudios.co/ for providing this useful answer:

$.ui.autocomplete.prototype._renderItem = function( ul, item){
  var term = this.term.split(' ').join('|');
  var re = new RegExp("(" + term + ")", "gi") ;
  var t = item.label.replace(re,"<b>$1</b>");
  return $( "<li></li>" )
     .data( "item.autocomplete", item )
     .append( "<a>" + t + "</a>" )
     .appendTo( ul );
};
$("#keyword").autocomplete({ 
  source: "ajax/autocomplete.php?action=keyword", 
  minLength: 2 
});