Highlight term in Autocomplete (extension)
http://forum.jquery.com/topic/autocomplete-add-an-option-match
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input class="ui-widget ui-widget-content ui-corner-all" id="tags">
</div>
CSS
body { font: 62.5% Verdana,Arial,sans-serif }
input { padding: 0.3em }
JavaScript
$.extend( $.ui.autocomplete.prototype, {
_renderItem: function( ul, item ) {
var term = this.element.val(),
html = item.label.replace( term, "<b>$&</b>" );
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( $("<a></a>").html(html) )
.appendTo( ul );
}
});
$( "#tags" ).autocomplete({
source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl" ],
delay: 0
});