jQuery UI autocomplete (combobox): how to fill it with the result of an AJAX request?

Question

Is it possible to work with combobox as with usual jquery-ui ajax autocomplete field?

What I need?

I want there will be some default options and when user try to put any letters it must connect to the server to find requested information (as usual remote json autocomplete).

Is it possible at all?

Answer 1

Here's a heavily modified version of the jQueryUI example (gist):

$.widget("ui.combobox", {
    _create: function() {
        var _self = this
            , options = $.extend({}, this.options, {
            minLength: 0,
            source: function(request, response) {
                if (!request.term.length) {
                    response(_self.options.initialValues);
                } else {
                    if (typeof _self.options.source === "function") {
                        _self.options.source(request, response);
                    } else if (typeof _self.options.source === "string") {
                        $.ajax({
                            url: _self.options.source,
                            data: request,
                            dataType: "json",
                            success: function(data, status) {
                                response(data);
                            },
                            error: function() {
                                response([]);
                            }
                        });
                    }
                }
            }
        });

        this.element.autocomplete(options);

        this.button = $("<button type='button'>&nbsp;</button>")
            .attr("tabIndex", -1)
            .attr("title", "Show All Items")
            .insertAfter(this.element)
            .button({
                icons: {
                    primary: "ui-icon-triangle-1-s"
                },
            text: false
            })
            .removeClass("ui-corner-all")
            .addClass("ui-corner-right ui-button-icon")
            .click(function() {
                if (_self.element.autocomplete("widget").is(":visible")) {
                    _self.element.autocomplete("close");
                    return;
                }
                _self.element.autocomplete("search", "");
                _self.element.focus();
        });
    }
});

Usage:

$("input_element_selector").combobox({
    initialValues: ['array', 'of', 'values'],
    source: /* <-- function or string performing remote search */,
    /* any other valid autocomplete options */
});

Example: http://jsfiddle.net/Jpqa8/

The widget uses the supplied initialValues array as the source when the length of the search is "0" (this happens when the user clicks the dropdown button).

Supply a source parameter (function or string) that performs the remote search. You can also use any other options you would usually use with the autocomplete widget.