Question

JavaScript code of doing ajax request

$('#search-field').autocomplete({source: 'url/of/autocomplete'});

It worked perfectly until I changed JSON structure. It used to return

["anything","something","super value"]

Now it (server) returns a bit complex JSON

[{"title":"some-title","link":"/searc?q=some-title"}, {"title":"some-title2","link":"/searc?q=some-title2"}]

Well, it’s not shown now. It’s working but the values (title) are not shown obviously.

What should I do to solve it?

Answer 1

I think you are using a AJAX returned data so the source attribute should be an function and you have to add a new attribute for when it’s selected. When you receive the data you need to store it in a global variable, and then you take its value in the other function:

 $('#search-field').autocomplete({source: function(){
       jQuery.post('url', data, function(dataReceived){globalVariable = dataReceived; }, 'json');
   },

   select: function(event, ui) { 
      var local = globalVariable[ui.item];
      // work with the local variable.
 }

});