jQuery Autocomplete zeigt keine Ergebnisse auf der Client-Seite an

Question

Meine Ergebnisse werden nicht in der Autocomplete powered by jQuery UI angezeigt. Ich sehe nur leere Reihen unter meiner Suchleiste und manchmal erscheinen sie nicht einmal.

Ich sehe meine Ergebnisse im Konsolenfenster, während ich Zeichen in das Suchfeld eintippe. Ich kann nicht herausfinden, was ich falsch mache.

Mein clientseitigen Code ist Setup wie folgt aus:

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

ich die Ergebnisse aus der console.log(data); Linie sehen. Es gibt ein Objekt mit einem Array von 3 darin enthaltenen Elemente: Object {addresses: Array[3]}

Mein serverseitigen Code Flask verwendet, ist wie folgt aufgebaut:

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

Das Ergebnis sieht wie folgt aus:

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

Answer 1

jQuery UI Autocomplete source erfordert ein Array von Zeichenfolgen oder ein Array von Objekten mit label und value Eigenschaften. Also sollten Sie Ihre Daten entsprechend umwandeln. Ihr Erfolg Rückruf sollte so etwas wie sein:

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

Oder

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