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?

Loblolly

Does it matter if the underlying element is a select (like it is in the combobox example)? – Horrible

No, it doesn't have to be there. – Loblolly

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.

Horrible

The only question is how to do initial values be an object, not array? For example: {'1':'array', '6':'of', '9':'values'}. Because when user choose any initial value it must return it's id value (like usual select). – Loblolly

Looks like I didn't understand your clarifying question (my poor English). Sorry... – Loblolly

@VitaliPonomar: You can provide an array like this: [{ 'label': 'array', 'value': '1'}, {'label': 'of', 'value': '6'}, {'label': 'values', 'value': '9'}] – Horrible

The only thing is when I choose some initial value, it automatically replaces it with it's digit... jsfiddle.net/eeMfN (What I want: initial values are the most popular cities in some country) – Loblolly

Ah I see. Well you can make it so that when you select an item it shows the label and not the value, but then the value won't be POSTed correctly... – Horrible

have any interesting ideas about that?:))) – Loblolly

You could update a hidden field with the value property on select: select: function(event,ui) { this.value = ui.item.label; $("hidden_field_selector").val(ui.item.value); } – Horrible

And how to make when I select an item it shows the label, not the value?? (sorry, for such maybe stupid questions - I'm truly new in js). Thanks! – Loblolly