jQueryオートコンプリートでクライアント側の結果が表示されない

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);ラインからの結果を見ることができます。それは内部の3つの項目の配列を持つオブジェクトを返します。Object {addresses: Array[3]}フラスコを使用して私のサーバー側のコードは次のように設定されている

：

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

Answer 1

：結果は次のようになります

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

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