jquery ui自动完成 - 与外部json建议

Question

我正在使用jquery ui自动完成。

我的问题是当我使用一个外部json的调用，建议功能停止工作。我的代码

$(document).ready(function() { 
    $('.comu').autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
     url: "https://raw.githubusercontent.com/edusl/test/master/municipios1.json", 
     dataType: "json", 
     success: response 
     }); 
    }, 
    minLength: 0, 
    autoFocus: true, 
    select: function(event, ui) { 
     event.preventDefault(); 
     $(".comu").val(ui.item.label); 
    }, 
    }); 
}); 

例子：codepen

提前感谢！

Answer 1

我怀疑你可能已经找到某人已经回答了这个问题。但这里有一个解决方案。

$(document).ready(function() { 
    $('.comu').autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
     url: "https://raw.githubusercontent.com/edusl/test/master/municipios1.json", 
     dataType: "json", 
     success: function(jData) { 
      var results = []; 
      $.each(jData, function(ind, val) { 
      if (val.label.toLowerCase().indexOf(request.term) === 0) { 
       results.push(val); 
      } 
      }); 
      response(results); 
     } 
     }); 
    }, 
    minLength: 0, 
    autoFocus: true, 
    select: function(event, ui) { 
     event.preventDefault(); 
     $(".comu").val(ui.item.label); 
    }, 
    }); 
}); 

工作实例：https://jsfiddle.net/Twisty/mL3h8pm0/

的AJAX请求将只返回所有的结果，那就是要传递什么到你的response。所以如果你在把它传递给response之前没有把它过滤掉，你总是会得到一个完整的列表。

此过滤器使用indexOf()列表，但您可以使用任何您想要的方法。

这里是另一个解决方案，将削减你的HTTP开销：

var m = []; 
$(document).ready(function() { 
    $.getJSON("https://raw.githubusercontent.com/edusl/test/master/municipios1.json", function(result) { 
    $.each(result, function(ind, val) { 
     m.push(val); 
    }); 
    }); 

    $('.comu').autocomplete({ 
    source: m, 
    minLength: 0, 
    autoFocus: true, 
    select: function(event, ui) { 
     event.preventDefault(); 
     $(".comu").val(ui.item.label); 
    }, 
    }); 
}); 

工作实例：https://jsfiddle.net/Twisty/mL3h8pm0/2/

这一次得到所有的数据和填充的数组。然后自动完成可以像正常一样使用它。