Highlight matched keywords for jQuery autocomplete

In this article, you will see how to highlight matched keyword for jquery ui autocomplete.

Now the below text box will display the following results.
Java, J2ee, Spring, Hibernate, Struts, Css, Maven, Spring Roo, Struts 2, Maven 2, EJB, JSF, JSF 2.0

Highlight Matched Keywords : Try this

Following code is used to highlight matched keyword.

var testdata=["Java","J2ee","Spring","Hibernate","CSS","HTML","Struts","Struts 2","Maven","Maven 2","Spring Roo","JSF","JSF 2.0","EJB"];
$.extend( $.ui.autocomplete.prototype, {
    _renderItem: function( ul, item ) {
        var term = this.element.val(),
        regex = new RegExp( '(' + term + ')', 'gi' );
            html = item.label.replace( regex , "<b>$&</b>" );
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( $("<a></a>").html(html) )
            .appendTo( ul );
    }
});
$('input[name=testlanguage]').autocomplete({
        minLength: 1,source: testdata
}); 


One Response to Highlight matched keywords for jQuery autocomplete

  1. Khalid March 28, 2013 at 5:42 pm #

    Thank you a bunch worked like charm :)

Leave a Reply