在这一点上似乎有一些问题涉及到各种jQuery插件(例如jQuery autocomplete display “No data” error message when results empty),但我想知道是否有更好/更简单的方法来实现与jQueryUI自动完成相同的方式.

在我看来,这是一个常见的用例,我想也许jQueryUI已经改进了jQuery自动完成功能,通过添加干净地处理这种情况的能力.然而,我没有找到这样的功能的文档,在我之前,我想抛出一些感觉,以防其他人看到这个.

虽然可能不是特别有影响力,我可以让服务器返回任何东西 – 例如HTTP 204：没有内容到200 / JSON空列表 – 无论什么使得最容易捕获jQueryUI的自动完成中的结果.

我的第一个想法是通过两个参数传递回调,即一个请求对象和一个响应回调来处理代码,根据文档：

The third variation,the callback,provides the most flexibility,and can be used to connect any data source to Autocomplete. The callback gets two arguments:

A request object,with a single property called “term”,which refers to the value currently in the text input. For example,when the user entered “new yo” in a city field,the Autocomplete term will equal “new yo”.

A response callback,which expects a single argument to contain the data to suggest to the user. This data should be filtered based on the provided term,and can be in any of the formats described above for simple local data (String-Array or Object-Array with label/value/both properties).

当响应回调没有收到数据时,插入返回一个特殊的一行对象数组,它具有一个标签和指示符,表示没有数据(所以select / focus将其识别为没有返回数据的指示符).

这似乎过于复杂.我更喜欢使用一个源代码“http：// …”,并且在某处指示没有返回任何数据的回调.

谢谢你的阅读.

布赖恩

编辑：

这是一个我创建的一个包装函数来解决这个问题,基于@ ThiefMaster的保证,它是正确的方法：

function autocomplete(input,source_url,on_select,on_focus,default_data) {
        /* Autocompletion for an input field
         * input: the field for autocompleting
         * source_url: the JSON url for getting data
         * on_select: function (event,ui) - when someone selects an element
         * on_focus: function (event,ui) - when someone focuses an element
         * default_data: function () returning default data; alternatively is the
         *               default dataset e.g. {'label':'X','value':'Y'}
         */

        $(input).autocomplete({
            source: function (request,response) {
                $.ajax({
                    url: source_url,dataType: "json",data: request,success: function (data) {
                        if (!data.length) { // expect [] or ""
                            var def_data = typeof(default_data) == 'function' ?
                                default_data() : default_data;
                            response(def_data);
                        } else {
                            response(data);
                        }
                    }
                });
            },minLength: 3,select: on_select,focus: on_focus,});
    }