Display data in autocomplete jQuery UI

Question

I created an autocomplete function, when I console.log it displays me all my files that is in remote JSON file, but When I try to display it when I start Type on input it doesn't show nothing, no errors but it doesn't work at all. Also I want to make this multi select autocomplete. But right now I want it only display suggestions when I start type on input.

$(function () {
  $("#city").autocomplete({
    source: function (request, response) {
      $.ajax({
        url: $('#city').attr('data-source'),
        success: function (data) {
          for (var i = 0; i < data.length; i++) {
            data[i].loc_name
          }
        }
      })
    }
  })
})

JSON

[{"population":1729119,"token":"167|7|179|1296|55544|0","loc_name":"Warszawa"},{"population":758463,"token":"167|6|135|976|7644|0","loc_name":"Krak\u00f3w"},{"population":718960,"token":"167|5|113|789|58247|25218","loc_name":"\u0141\u00f3d\u017a Teofil\u00f3w"},{"population":718960,"token":"167|5|113|789|58247|25340","loc_name":"\u0141\u00f3d\u017a G\u00f3rna"},{"population":718960,"token":"167|5|113|789|58247|25282","loc_name":"\u0141\u00f3d\u017a \u0141askowice"}]

Rory McCrossan · Accepted Answer · 2017-08-17 10:13:20Z

2

The issue is because your AJAX logic isn't quite right. Once the AJAX completes you need to provide the received data to the response callback, like this:

$("#city").autocomplete({
  source: function (request, response) {
    $.ajax({
      url: $('#city').data('source'),
      success: function(data) {
        var output = data.map(function(o) {
          return {
            label: o.loc_name,
            value: o.token
          }
        });
        response(output);
      }
    })
  }
})

This is assuming that the format that data is returned in matches the format that autocomplete expects. If not you'll have to modify the array - preferably on the server.

edited Aug 17, 2017 at 10:13

answered Aug 17, 2017 at 9:39

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Konrad Uciechowski Over a year ago

But it's not working for me, my json looks like this and I want to display only "loc_name" to display on autocomplete, but post only "token":

[{"population":1729119,"token":"167|7|179|1296|55544|0","loc_name":"Warszawa"},{"population":758463,"token":"167|6|135|976|7644|0","loc_name":"Krak\u00f3w"},{"population":718960,"token":"167|5|113|789|58247|25218","loc_name":"\u0141\u00f3d\u017a Teofil\u00f3w"}]

Rory McCrossan Over a year ago

In which case you need to amend the format to return an array of {label: '', value: ''} objects. I updated the answer for you, although it would really be better to do that on the server side. Also note that I assumed the properties you want to use for the label/value. Feel free to amend if needed.

Konrad Uciechowski Over a year ago

I just change my code to your solution but I got an error that on label: o.loc_name, value: o.token is "unexpected token :"

Rory McCrossan Over a year ago

Apologies, I missed the return statement. Try now

Collectives™ on Stack Overflow

Display data in autocomplete jQuery UI

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related