问题 jQuery UI自动完成（combobox）：如何用AJAX请求的结果填充它？

我需要的？

我希望会有一些默认选项，当用户尝试输入任何字母时，它必须连接到服务器以查找所请求的信息（通常是远程json自动完成）。

有可能吗？

这是jQueryUI示例的大量修改版本（要旨）：

$.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 执行远程搜索的参数（函数或字符串）。您还可以使用通常用于自动完成小部件的任何其他选项。

你救了我！谢谢！ - Vitalii Ponomar

唯一的问题是如何将初始值作为对象而不是数组？例如： {'1':'array', '6':'of', '9':'values'}。因为当用户选择任何初始值时，它必须返回它的id值（就像通常的select一样）。 - Vitalii Ponomar

看起来我不明白你的澄清问题（我的英语不好）。抱歉... - Vitalii Ponomar

@VitaliPonomar：你可以提供这样的数组： [{ 'label': 'array', 'value': '1'}, {'label': 'of', 'value': '6'}, {'label': 'values', 'value': '9'}] - Andrew Whitaker

这是一个更新的例子： jsfiddle.net/A3qMX - Andrew Whitaker

问题 jQuery UI自动完成（combobox）：如何用AJAX请求的结果填充它？

答案:

热门问题