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

【问题标题】：Jquery ui automplete + json, Can't display "no result" in the listJquery ui自动完成+ json，无法在列表中显示“无结果”
【发布时间】：2017-03-11 05:41:05
【问题描述】：

我尝试进行自动完成，但遇到了一个问题 - 我无法显示“未找到结果”。有两个问题：它显示“无结果”5次或没有显示任何内容。代码如下：

$(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 折叠吗？ jqueryui.com/autocomplete/#folding
欢迎来到 Stack Overflow。我认为不返回任何结果会向用户表明“未找到结果”。如果列表缩小或不返回任何条目，我很有信心您不必向用户指示“无结果”。但如果你想这样做，有办法。

标签： jquery jquery-ui autocomplete jquery-ui-autocomplete

【解决方案1】：

要返回“无结果”，您必须将 [ "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
  });
});

【讨论】：