jquery ui autocomplete combobox widget example mod

Question

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" );
                        response( 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?

Answer 1

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

Answer 2

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>" ),
                                    }
                                }))
                            }
                        })
                    },