Подтвердить что ты не робот

JQuery UI autocomplete (combobox): как заполнить его результатом запроса AJAX?

Можно ли работать с combobox, как с обычным jquery -ui ajax поле автозаполнения?

Что мне нужно?

Я хочу, чтобы были некоторые параметры по умолчанию, и когда пользователь пытается поместить какие-либо буквы, он должен подключиться к серверу, чтобы найти запрошенную информацию (как обычно, автозаполнение удаленного json).

Возможно ли вообще?

Ответ 1

Здесь сильно измененная версия примера jQueryUI (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();
        });
    }
});

Применение:

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

Пример: http://jsfiddle.net/Jpqa8/

Виджет использует поставляемый массив initialValues в качестве источника, когда длина поиска равна "0" (это происходит, когда пользователь нажимает кнопку выпадающего списка).

Поставьте параметр source (функция или строка), который выполняет удаленный поиск. Вы также можете использовать любые другие параметры, которые вы обычно используете с виджетами автозаполнения.