Edit in JSFiddle

<input type="text" id="Username" />

 $.widget("custom.catcomplete", $.ui.autocomplete, {
        _renderMenu: function (ul, items) {
            var that = this,
				currentCategory = "";
            $.each(items, function (index, item) {
                if (item.category != currentCategory) {
                    ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                    currentCategory = item.category;
                }
                that._renderItemData(ul, item);
            });
        }
    });

	    $(function () {
	        var data = [
			{ label: "Fabregas", category: "Football" },
			{ label: "Messi", category: "Football" },
			{ label: "Ronaldo", category: "Football" },
			{ label: "Ronaldinho", category: "Football" },
			{ label: "Sachin", category: "Cricket" },
			{ label: "Dravid", category: "Cricket" },
			{ label: "James", category: "BasketBall" },
			{ label: "Bryant", category: "BasketBall" },
			{ label: "Federer", category: "Tennis" },
            { label: "Nadal", category: "Tennis" },
            { label: "Djokovic", category: "Tennis" }
		];

	        $("#Username").catcomplete({
	            delay: 0,
	            source: data
	        });
	    });

.ui-autocomplete-category {
		font-weight: bold;
		padding: .2em .4em;
		margin: .8em 0 .2em;
		line-height: 1.5;
	}