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

Posted 2023-05-08

【中文标题】jQueryUI 自动完成 - 当没有结果返回时

【英文标题】：jQueryUI autocomplete - when no results are returned

【发布时间】：2011-02-20 02:35:33

【问题描述】：

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

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

在我看来这是一个常见的用例，我想也许 jQueryUI 通过添加干净处理这种情况的能力来改进 jQuery 自动完成功能。但是，我一直无法找到此类功能的文档，在我破解它之前，我想先试探一下，以防其他人以前看到过。

虽然可能不是特别有影响力，但我可以让服务器返回任何内容 - 例如HTTP 204: No Content 到一个 200/JSON 的空列表 - 任何最容易在 jQueryUI 的自动完成中捕获结果的方法。

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

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

一个请求对象，具有一个名为“term”的属性，它指的是文本输入中当前的值。例如，当用户在城市字段中输入“new yo”时，自动填充词将等于“new yo”。

一个响应回调，它需要一个参数来包含要向用户建议的数据。此数据应根据提供的术语进行过滤，并且可以采用上述任何简单本地数据的格式（字符串数组或具有标签/值/两个属性的对象数组）。

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

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

【问题讨论】：

这里有一个很棒的方法：来自 Andrew Whittaker 的***.com/questions/4718968/… 解释得很好，很贴心。

Detecting no results on jQuery UI autocomplete 的可能副本

【参考方案1】：

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

【参考方案2】：

response 选项很容易处理

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

这是我的截图：

【参考方案3】：

将源视为 php 脚本：

我在代码中所做的是我从 php 脚本返回 NO 结果消息，例如

$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);

来自 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 );
        
    ;

。 它对我来说非常好。

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

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