views:

109

answers:

2

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

What finally worked was provided by David Murdoch at http://www.vervestudios.co/

$.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 
});
A: 

See this: http://stackoverflow.com/questions/957207/highlight-multiple-keywords-for-jquery-autocomplete

Tomasz Kowalczyk
thanks tomasz, still doesn't see to work, posted new code above
Jaime Cross
I don't know because I don't see the context you are working in, but it really should work - you are simply "bolding" elements that matched specified regexp.
Tomasz Kowalczyk
That's what I would have thought as well. However, sadly, jquery hates me :p
Jaime Cross
The problem was that this question is about the jQuery UI official Autocomplete widget and Tomasz's question was about the jQuery Autocomplete plugin. Two different code sets :-)
Andrew
+1  A: 

go to http://jqueryui.com/demos/autocomplete/, look at the "Combobox" example and copy the code (you can remove the button code)

elektronikLexikon