jQuery UI自动完成功能(组合框):如何用AJAX请求的结果填充它? [英] jQuery UI autocomplete (combobox): how to fill it with the result of an AJAX request?

问题描述

是否可以像通常的我需要什么?

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

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).

有可能吗?

推荐答案

这是jQueryUI示例的重大修改版本(要点 ):

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();
        });
    }
});

用法:

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

示例: http://jsfiddle.net/Jpqa8/

当搜索长度为"0"时，小部件将使用提供的initialValues数组作为源(当用户单击下拉按钮时会发生这种情况).

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).

提供执行远程搜索的source参数(函数或字符串).您还可以使用通常与自动完成小部件一起使用的任何其他选项.

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.

这篇关于jQuery UI自动完成功能(组合框):如何用AJAX请求的结果填充它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！