Asynch使用jquery自动完成

Question

我想使用来自我服务器的数据向输入表单添加自动完成功能。地址/countries/search上提供的数据以JSON形式返回，如下所示：

[{"name":"Afghanistan","code":"AF"},{"name":"Aland Islands","code":"AX"},{"name":"Albania","code":"AL"}]

这是我的代码：

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<input type="text" name="countries" id="tags"/>
<script>
    $(function () {
        $("#tags").autocomplete({
            source: "/countries/search/"
        });
    });
</script>

当我在字段中输入内容时，服务器会收到请求，但自动完成看起来有点奇怪，并且不包含任何数据：

为什么会发生这种情况，我该如何解决这个问题？

修改

我发现来自/countries/search的数据应该是一个只有里面名字的JSON对象。

Answer 1

根据文档here，您的源需要是一个Javascript数组。因此，我建议您向服务器发出ajax请求，并在成功回调上调用此方法。

有些事情：

$.ajax({
  url: '/countries/search/',
  type: 'GET',
  success: function(data) {
    $("#tags").autocomplete({
        source: data
    });
  },
  error: function(jqXHR, textStatus, errorThrown){

  }
});