Jquery ui自动完成+ json，无法在列表中显示“无结果”

问题描述：

我试图使自动完成，但面临一个问题 - 我不能显示“找不到结果”。有两个问题：5次显示“无结果”，或者没有显示任何内容。下面的代码：Jquery ui自动完成+ json，无法在列表中显示“无结果”

$(document).ready(function() { 
$("#cities").autocomplete({ 
    source: function(request, response){ 
    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
    $.ajax({ 
     url: "cities.json", 
     crossDomain: true, 
     dataType: "json", 
     success: function(data){ 
     response($.map(data, function(v,i){ 
      var text = v.City; 
      if(text && (!request.term || matcher.test(text))){ 
       return { 
        label: v.Id, 
        value: v.City 
       }; 
      }else{ 
        value: "No result" 
      } 
     })); 
     } 
    }); 
    }, 
    minLength: 1, 
    autoFocus: true 
    }); 
});

我使用的本地JSON文件，其中包含了这样的数据：

[ 
{ 
"Id": 0, 
"City": "Toronto" 
},{ 
"Id": 1, 
"City": "New-York" 
},{ 
"Id": 2, 
"City": "Moscow" 
},{ 
"Id": 3, 
"City": "Monreal" 
},{ 
"Id": 4, 
"City": "Vancouver" 
},{ 
"Id": 5, 
"City": "Williamsburg" 
} 
]

如果你已经有json文件，那么你为什么要做ajax调用？ –

你需要Accent折叠吗？ https://jqueryui.com/autocomplete/#folding –

欢迎来到Stack Overflow。我认为没有结果返回会向用户指出“未找到结果”。如果列表缩小或不返回任何条目，我感到非常自信，您不必向用户指示“无结果”。但是，如果你想这样做，有一种方法。 – Twisty

答

要返回“无结果”，你必须通过[ "No Results" ]数组你response回调。

$(document).ready(function() { 
    $("#cities").autocomplete({ 
    source: function(request, response){ 
     var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
     $.ajax({ 
     url: "cities.json", 
     crossDomain: true, 
     dataType: "json", 
     success: function(data){ 
      var results = []; 
      $.each(data, function(k,v){ 
      var text = v.City; 
      if(text && (!request.term || matcher.test(text))){ 
       results.push({ 
       label: v.Id, 
       value: v.City 
       }); 
      } 
      }); 
      if(results.length == 0){ 
      results.push({ label: "No Results", value: null }); 
      } 
      response(results); 
     } 
     }); 
    }); 
    }, 
    minLength: 1, 
    autoFocus: true 
    }); 
});

Jquery ui自动完成+ json，无法在列表中显示“无结果”

相关推荐