Автозаполнение пользовательского интерфейса jQuery (выпадающий список): как заполнить его результатом запроса AJAX? - PullRequest
Новая
       5

Автозаполнение пользовательского интерфейса jQuery (выпадающий список): как заполнить его результатом запроса AJAX?

11 голосов
/ 29 ноября 2011

Можно ли работать с выпадающим списком как с обычным полем автозаполнения jjery-ui ajax ?

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

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

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

1 Ответ

11 голосов
/ 30 ноября 2011

Вот сильно измененная версия примера 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 (функцию или строку), который выполняет удаленный поиск.Вы также можете использовать любые другие параметры, которые вы обычно используете с виджетом автозаполнения.

...