Question

我的结果不会在由jQuery UI支持的自动完成中填充。我只是在搜索栏下方看到空行，有时它们甚至都没有显示出来。

在搜索字段中输入字符时，我确实在控制台窗口中看到了我的结果。我无法弄清楚我做错了什么。

我的客户端代码设置如下：

<input id="autocomplete" class="form-control input-lg" name="autocomplete" placeholder="Search an address" type="text">

$('#autocomplete').autocomplete({
  source: function(request, response) {
    $.getJSON('{{url_for("getInfo")}}', {
      a: request.term,
    }, function(data) {
      console.log(data);
      response(data.addresses);
    });
  },
  minLength: 3,
  select: function(event, ui) {
    console.log(ui.item.value);
  }
});

我可以看到console.log(data);行的结果。它返回一个Object，其中包含一个包含3个项目的数组：Object {addresses: Array[3]}

使用Flask的服务器端代码设置如下：

@app.route('/getInfo', methods=['GET'])
def getInfo():
    address = request.args.get("a")
    addressCollection = myDB["addresses"]
    addressJSON = []

    for address in addressCollection.find({'Address': {'$regex':regex,'$options':'i'} },{"Address":1,"_id":0}).limit(3):
        addressJSON.append({"Address":address["Address"]})
    return jsonify(addresses=addressJSON)

结果如下：

{
  "addresses": [
    {
      "Address": "29 Valleyridge Rd",
    }, 
    {
      "Address": "29 Valleyview Dr", 
    }, 
    {
      "Address": "29 Valleystone Cr",
    }
  ]
}

Answer 1

jQuery UI自动完成source需要一个字符串数组或一个具有label和value属性的对象数组。因此，您应该相应地转换数据。你的成功回调应该是：

function(data) {
  var transformed = data.addresses.map(function(address) {
    return address.Address;
  });
  response(transformed);
}

或者

function(data) {
  var transformed = data.addresses.map(function(address) {
    return {
      label: address.Address
    };
  });
  response(transformed);
}

jQuery自动完成不在客户端显示结果

1 个答案: