CODEWITHSUNDEEP
jqueryjquery-uiflaskautocompletejquery-ui-autocomplete
kaoscify
kaoscify

Reputation: 1763

jQuery Autocomplete Not Showing Results on Client-Side

My results don't get populated in the Autocomplete powered by jQuery UI. I just see empty rows beneath my search bar and sometimes they don't even show up.

I do see my results in the console window as I type characters in the search field. I can't figure out what I'm doing wrong.

My client-side code is setup like this:

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

I can see the results from the console.log(data); line. It returns an Object with an Array of 3 items inside it: Object {addresses: Array[3]}

My server-side code using Flask is set up like this:

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

The result looks like this:

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

Upvotes: 0

Views: 323

Answers (1)

T J
T J

Reputation: 43156

jQuery UI Autocomplete source requires an array of strings, or an array of objects having label and value properties. So you should transform your data accordingly. Your success callback should be something like:

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

Or

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

Upvotes: 1

Related Questions