Question

我创建了一个自动完成功能，当我在console.log时它会显示我在远程JSON文件中的所有文件，但是当我尝试显示它时，当我开始输入输入时它没有显示任何内容，没有错误，但它根本不起作用。此外，我想进行多选自动完成。但是现在我希望它只在我开始输入时显示建议。

$(function () {
  $("#city").autocomplete({
    source: function (request, response) {
      $.ajax({
        url: $('#city').attr('data-source'),
        success: function (data) {
          for (var i = 0; i < data.length; i++) {
            data[i].loc_name
          }
        }
      })
    }
  })
})

JSON

[{"population":1729119,"token":"167|7|179|1296|55544|0","loc_name":"Warszawa"},{"population":758463,"token":"167|6|135|976|7644|0","loc_name":"Krak\u00f3w"},{"population":718960,"token":"167|5|113|789|58247|25218","loc_name":"\u0141\u00f3d\u017a Teofil\u00f3w"},{"population":718960,"token":"167|5|113|789|58247|25340","loc_name":"\u0141\u00f3d\u017a G\u00f3rna"},{"population":718960,"token":"167|5|113|789|58247|25282","loc_name":"\u0141\u00f3d\u017a \u0141askowice"}]

Answer 1

问题是因为你的AJAX逻辑不太正确。一旦AJAX完成，您需要将收到的数据提供给response回调，如下所示：

$("#city").autocomplete({
  source: function (request, response) {
    $.ajax({
      url: $('#city').data('source'),
      success: function(data) {
        var output = data.map(function(o) {
          return {
            label: o.loc_name,
            value: o.token
          }
        });
        response(output);
      }
    })
  }
})

这假设返回data的格式与autocomplete期望的格式匹配。如果不是，您将不得不修改阵列 - 最好是在服务器上。

在自动完成jQuery UI中显示数据

1 个答案: