代码之家  ›  专栏  ›  技术社区  ›  Aaron McAdam

在jquery自动完成中不处理任何结果

  •  9
  • Aaron McAdam  · 技术社区  · 17 年前

    嘿,当用户当前查询没有结果时,我正在尝试返回一条消息!我知道我需要进入keyup事件,但看起来插件正在使用它

    4 回复  |  直到 13 年前
        1
  •  6
  •   tvanfosson    17 年前

    您可以尝试提供一个分析选项(用于处理数据分析的函数),并在没有返回结果进行分析时执行所需的操作。

    本例假设您要返回一个包含全名和地址属性的JSON对象数组。

       $('#search').autocomplete( {
           dataType: "json",
           parse: function(data) {
             var array = new Array();
             if (!data || data.length == 0) {
                 // handle no data case specially
             }
             else {
                for (var i = 0; i < data.length; ++i) {
                   var datum = data[i];
                   array[array.length] = { 
                                           data: datum,
                                           value: data.FullName + ' ' + data.Address,
                                           result: data.DisplayName
                                         };
                }
             }
             return array;
           }
       });
    
        2
  •  9
  •   Community Mohan Dere    9 年前

    这个问题真的过时了,不管怎样,我在使用新的jquery ui 1.8.16,自动完成功能现在已经非常不同了: http://jqueryui.com/demos/autocomplete/#default

    不管怎样,如果你想做与问题相同的事情,就我所知,没有更多的解析函数,也没有用搜索结果调用的函数。

    我成功实现这一点的方法是重写autocomplete的过滤功能-注意:这将影响所有的autocomplete

    $.ui.autocomplete.filter = function(array, term) {
                var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term), "i" );
    
                var aryMatches = $.grep( array, function(value) {
                    return matcher.test(value.label || value.value || value);
                });
    
                if (aryMatches.length == 0){
                    aryMatches.push({
                        label: '<span class="info" style="font-style: italic;">no match found</span>',
                        value: null
                    });                     
                }
    
                return aryMatches;
            };
    

    函数在源代码中进行了轻微修改,grep调用是相同的,但是如果没有结果,我添加了一个值为空的对象,那么我将重写select调用以检查空值。

    这会给你一种效果,如果你继续输入,没有找到匹配项,你会在下拉列表中得到“没有找到匹配项”,这很酷。

    要覆盖选择调用,请参见 jQuery UI Autocomplete disable Select & Close events

    $(this).data('autocomplete').menu.options.selected = function(oEvent, ui){
    
                if ($(ui.item).data('item.autocomplete').value != null){
                    //your code here - remember to call close on your autocomplete after
    
    
                }
            };
    

    因为我在一个页面上的所有自动完成功能上都使用了这个功能,所以请确保首先检查值是否为空!在尝试引用不存在的键之前。

        3
  •  2
  •   Ian Stanway    13 年前

    我使用以下代码的目的相同(消息显示在自动完成列表中):

    success: function(data, status, xhr){                       
        if(!data.length){
            var result = [
                {
                    label: 'There are no matches for your query: ' + response.term, 
                    value: response.term
                }
            ];
            response(result);
        }
        else{
            // normal response
        }
    }
    
        4
  •  2
  •   KWondra    13 年前

    您还可以使用“响应”事件来检查这一点。简单但强大。 http://api.jqueryui.com/autocomplete/#event-response

    response: function (event, ui) {
                if (ui.content.length == 0) {
                    //Display an alert or something similar since there are no results
                }
            },