jquery ui autocomplete combobox widget example modified for ajax source

Has anyone successfully modified the above mentioned widget for ajax source? I've been able to make the modifications and it works fine with the exception of the search term highlighting of the options. More specifically the below code.

var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
                        respons开发者_JAVA技巧e( select.children( "option" ).map(function() {
                            var text = $( this ).text();
                            if ( this.value && ( !request.term || matcher.test(text) ) )
                                return {
                                    label: text.replace(
                                        new RegExp(
                                            "(?![^&;]+;)(?!<[^<>]*)(" +
                                            $.ui.autocomplete.escapeRegex(request.term) +
                                            ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                        ), "<strong>$1</strong>" ),
                                    value: text,
                                    option: this
                                };
                        }) );

Here's my modification to the widget:

(function ($) {
    $.widget("ui.Clients", {
        _create: function () {
            var self = this,
                select = this.element.hide(),
                selected = select.children(":selected"),
                value = selected.val() ? selected.text() : "";
            var input = this.input = $("<input>")
                .insertAfter(select)
                .val(value)
                .autocomplete({
                    delay: 0,
                    minLength: 0,
                    source: function (request, response) {
                        $.ajax({
                            url: "/Controller/Action", type: "POST", dataType: "json",
                            data: { searchText: request.term },
                            success: function (data) {
                                response($.map(data, function (item) {
                                    return {
                                        value: item.ClientName,
                                        id: item.ClientId
                                    }
                                }))
                            }
                        })
                    },

Can anyone assist with integrating that functionality into my ajax call?

The widget expects there to be a label property in the return value from the response. The label property is what is displayed in the autocomplete window. If you don't specify a label property, it will just the value property. So, all you need to do is alter the original value for the label property and replace the text with item.ClientName

(function ($) {
    $.widget("ui.Clients", {
        _create: function () {
            var self = this,
                select = this.element.hide(),
                selected = select.children(":selected"),
                value = selected.val() ? selected.text() : "";
            var input = this.input = $("<input>")
                .insertAfter(select)
                .val(value)
                .autocomplete({
                    delay: 0,
                    minLength: 0,
                    source: function (request, response) {
                        $.ajax({
                            url: "/Controller/Action", type: "POST", dataType: "json",
                            data: { searchText: request.term },
                            success: function (data) {
                                response($.map(data, function (item) {
                                    return {
                                        value: item.ClientName,
                                        id: item.ClientId,
                                        label: item.ClientName.replace(
                                                new RegExp(
                                                    "(?![^&;]+;)(?!<[^<>]*)(" +
                                                    $.ui.autocomplete.escapeRegex(request.term) +
                                                    ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                                ), "<strong>$1</strong>" ),
                                    }
                                }))
                            }
                        })
                    },

The demo has a nice mix of options - Remote JSONP Datasource being one of them.