jQuery自動完成不顯示客戶端結果

Question

我的結果不會在由jQuery UI支持的Autocomplete中填充。我只在我的搜索欄下看到空行，有時甚至不顯示。

我在控制檯窗口中看到我的結果，因爲我在搜索字段中鍵入字符。我無法弄清楚我做錯了什麼。

我的客戶端代碼的設置是這樣的：

<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);線的結果。它返回一個對象與它裏面的3個項目組成的數組：Object {addresses: Array[3]}

用瓶我的服務器端代碼設置如下：

@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); 
}