首页 文章

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

提问于
浏览 次
12

我想知道当使用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” . 一个响应回调，它要求一个参数包含要向用户建议的数据 . 应根据提供的术语过滤此数据，并且可以采用上述任何简单本地数据格式（String-Array或具有标签/值/两者属性的Object-Array） .

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

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

谢谢你的阅读 .

布赖恩

EDIT:

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

3 回答

  • 2

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

    回复于
  • 11

    使用 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);
        }
    }
});

    这是我的截图：

    enter image description here

    回复于
  • 0

    将源代码视为php脚本：

    我在我的代码中做了什么是我从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);

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

    . 它对我来说非常好 .

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

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

    回复于

相关问题