用jQuery异步自动完成

彼德

我想使用服务器中的数据将自动补全功能添加到输入表单中。地址中给出的数据/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对象。

桑迪普

根据此处的文档您的源代码必须是Javascript数组。因此,我建议您向服务器发出ajax请求,并在成功回调中调用此方法。

类似于以下内容:

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

  }
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章