jquery ui autocomplete combobox widget example modified for ajax source

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 hi

Answer 1

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

Answer 2

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