jQueryUI自动完成-当没有结果返回时 [英] jQueryUI autocomplete - when no results are returned

问题描述

我想知道当使用 jQueryUI自动完成.

关于这一点，似乎与各个jQuery插件有关的一些问题(例如 jQuery自动完成显示结果时显示无数据"错误消息)空)，但我想知道是否有更好/更简单的方法来实现jQueryUI自动完成功能.

There seem to be a few questions on this point related to the various jQuery plugins (e.g. jQuery autocomplete display "No data" error message when results empty), but I am wondering if there's a better/simpler way to achieve the same with the jQueryUI autocomplete.

在我看来，这是一个常见的用例，而且我认为也许jQueryUI通过添加干净处理这种情况的功能而在jQuery自动完成方面得到了改进.但是，我还没有找到有关这种功能的文档，在我放弃它之前，我想抛出一些触角，以防其他人以前看到过这种触角.

It seems to me this is a common use case, and I thought perhaps that jQueryUI had improved on the jQuery autocomplete by adding the ability to cleanly handle this situation. However I've not been able to find documentation of such functionality, and before I hack away at it I'd like to throw out some feelers in case others have seen this before.

虽然可能影响不大，但我可以让服务器返回任何内容-例如HTTP 204: No Content到200/JSON空列表-使jQueryUI的自动完成功能最容易捕获结果的任何方法.

While probably not particularly influential, I can have the server return anything - e.g. HTTP 204: No Content to a 200/JSON empty list - whatever makes it easiest to catch the result in jQueryUI's autocomplete.

我的第一个想法是根据文档传递带有两个参数的回调，即一个请求对象和一个response callback来处理代码:

My first thought is to pass a callback with two arguments, namely a request object and a response callback to handle the code, per the documentation:

第三个变体，即回调，提供了最大的灵活性，可用于将任何数据源连接到自动完成".回调有两个参数:

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:

一个请求对象，具有一个称为"term"的单个属性，它引用文本输入中当前的值.例如，当用户在城市字段中输入"new yo"时，自动完成"字词将等于"new yo".

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将其识别为指示未返回数据的指示符) ).

When the response callback receives no data, it inserts returns a special one-line object-array that has a label and an indicator that there's no data (so the select/focus recognize it as the indicator that no-data was returned).

这似乎太复杂了.我希望能够使用一个来源:"http://..."，并且仅在某处存在一个回调，指示未返回任何数据.

This seems overcomplicated. I'd prefer to be able to use a source: "http://...", and just have a callback somewhere indicating that no data was returned.

感谢您的阅读.

布莱恩

这是我基于@ThiefMaster保证它是正确的解决方法而创建的包装函数，用于解决此问题:

Here's a wrapper function I created to solve this, based on @ThiefMaster's reassurance that it is the right way to go about it:

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

推荐答案

覆盖自动完成程序对象的response函数可能会起作用，但这只是猴子补丁.使用响应回调很可能是实现所需目标的最干净的方法.

Overwriting the response function of the autocompleter object might work, but that's monkeypatching. Using the response callback is most likely the cleanest way to achieve what you want.

这篇关于jQueryUI自动完成-当没有结果返回时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！