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">

    <button class="ui-widget ui-widget-content ui-corner-all" id="btn">
        close </button>
    Type s, then press close buttton.
</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 );
    }
});

(function($){
    $.widget("np.hAutocomplete", $.ui.autocomplete, {
        _create: function () {
            $.ui.autocomplete.prototype._create.call(this);
            this.element.data('autocomplete', this.element.data('hAutocomplete'));
        }
    });
})(jQuery);

$( "#tags" ).hAutocomplete({
    source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl" ],
    delay: 0
});


$("#btn").click (function () {
    var i = $("#tags");
        // i.autocomplete( "close" );
   if ( !i.autocomplete( "widget" ).is( ":visible" ) ) {
        i.autocomplete( "close" );
        return;
    }
});