jQueryUI 自动完成 - 当没有返回结果时

Question

我想知道当使用jQueryUI autocomplete时从服务器返回空结果时如何捕获并添加自定义处理程序.

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

在我看来，这是一个常见的用例，我认为 jQueryUI 可能通过添加干净地处理这种情况的能力来改进 jQuery 自动完成功能。然而，我还没有找到此类功能的文档，在我开始研究它之前，我想先试探一下，以防其他人以前见过这个。

虽然可能不是特别有影响力，但我可以让服务器返回任何内容 - 例如HTTP 204: No Content 到 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).

当响应回调没有收到数据时，它会插入返回一个特殊的单行对象数组，该数组具有标签和没有数据的指示符(因此选择/焦点将其识别为没有返回数据的指示符) )。

这似乎过于复杂。我希望能够使用源:“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,
        });
    }

Answer 1

覆盖自动完成器对象的response函数可能会起作用，但那是猴子补丁。使用响应回调很可能是实现您想要的效果的最简洁的方法。