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

I'm wondering how one can catch and add a custom handler when empty results are returned from the server when using jQueryUI autocomplete.

我想知道当使用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.

关于这一点似乎有一些与各种jQuery插件相关的问题(例如,当结果为空时,jQuery自动完成显示“无数据”错误消息),但我想知道是否有更好/更简单的方法来实现与jQueryUI相同的自动完成。

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.

在我看来,这是一个常见的用例,我想也许jQueryUI通过添加干净地处理这种情况的能力改进了jQuery自动完成。然而,我无法找到这种功能的文档,在我破解它之前,我想抛弃一些触角,以防其他人以前见过这个。

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.

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

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:

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

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

一个请求对象,具有一个名为“term”的属性,它引用当前文本输入中的值。例如,当用户在城市字段中输入“new yo”时,自动完成术语将等于“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).

一个响应回调,它期望一个参数包含要向用户建议的数据。应根据提供的术语过滤此数据,并且可以采用上述任何简单本地数据格式(String-Array或具有标签/值/两者属性的Object-Array)。

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

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

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.

这似乎过于复杂。我更喜欢能够使用一个源:“http:// ...”,只是在某个地方有一个回调,表明没有返回数据。

Thank you for reading.

谢谢你的阅读。

Brian

EDIT:

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:

这是我为解决这个问题而创建的包装函数,基于@ 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,
        });
    }

3 个解决方案

#1

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.

覆盖自动完成对象的响应函数可能有效,但这是monkeypatching。使用响应回调很可能是实现所需内容的最简洁方法。

#2

It is easy to handle with response option

使用响应选项很容易处理

$( 'input.Srch' ).autocomplete({
    minLength: 3,
    .......
    response: function(event, ui) {
        if (!ui.content.length) {
                var noResult = { value:"",label:"No results found" };
                ui.content.push(noResult);
        }
    }
});

Here is my screenshot:

这是我的截图:

#3

Considering source as php script:

将源代码视为php脚本:

what i did in my code is I returned NO results message from php script like

我在我的代码中做了什么是我从PHP脚本返回没有结果消息

$ArrayMe =  Array();
if(rows found){
  array_push( $ArrayMe ,array('key1'=> $val1, 'key2'=> $val2, 'key3'=> $val3));
} else {
 array_push( $ArrayMe ,array("message"=>"No results found" ));
}
echo json_encode($ArrayMe);

from jquery:

 $( "input#val1" ).autocomplete({
        minLength: 2,

        source:function (request, response) {
        $.ajax({
                type: 'get',
                url: "path/to/phpscript.php",
                dataType: "json",
                data: { term: request.term },
                success: function(data) {
                        response($.map(data, function (value) {
                            if(value.message){
                                console.log(value.message);
                                $('p#val2').html("");
                                $('p#val3').html("");
                                return {Message: value.message}
                           } else {
                                return {
                                    key1: value.val1,
                                    key2: value.val2,
                                    key3: value.val3

                                }
                           }
                        }));
                    }   
                });
   },  
        focus: function( event, ui ) {
            $( "input#val1" ).val( ui.item.val1);
            $( "p#val2" ).html( ui.item.val2);
            $( "p#val2" ).html( ui.item.val3);
            return false;
        },
        select: function( event, ui ) {
            $( "input#val1" ).val( ui.item.val1);

            $( "p#val2" ).html( ui.item.val2);
            $( "p#val3" ).html( ui.item.val3);


            return false;
        }
    }).autocomplete( "instance" )._renderItem = function( ul, item ) {
        if(item.Message){
            return $( "<li>" )
                .append( "<div>" + item.Message +"</div>" )
                .appendTo( ul );
        } else{
            return $( "<li>" )
                .append( "<div>" + item.val1+ " | " + item.val2+  " | " + item.val3+"</div>" )
                .appendTo( ul );
        }
    };

. It worked perfectly fine for me.

。它对我来说非常好。

If no data gets message as well as triggers required fields.

如果没有数据获取消息以及触发必填字段。

I am very poor in explanation so i posted entire code to make it easier.

我的解释很差,所以我发布了整个代码以使其更容易。