Question

another question about jQuery autocomplete with wich i’m having problems despite the numerous resources on this forum or on jQuery docs.

I’m having a hard time mapping response data from a PHP script with jQuery UI. Here is the code:

$("#shared-with").autocomplete({
  source: function(request, response) {

    $.ajax({
      type: 'get',
      url: 'ajax/search.php',
      data: { term: request.term },
      success: function(data){

           // alert(data);
           response($.map(data, function(c) {
             return {
                 label: c.name,
                 value: c.nametag
             }
           }));

     }
   });
 }
});

My problem is that the response/map function is not properly understood by jQuery autocomplete although the data that is sent back from search.php looks like:

echo json_encode(
     array('name' => 'Bill', 'nametag' => 'Big Bill'),
     array('name' => 'Fred', 'nametag' => 'Small Fred'),
);

PS: when i alert “data” in javascript popup show me a valid javascript array/object…
PS: “#shared-with” is just the textarea

Any idea ? Thanks in advance.

Answer 1

I found that the data was in fact return as a string from my PHP search page.

All i needed to do was reconvert the string into an JS array:

data = $.parseJSON(data);

response($.map(data, function(c) {
             return {
                 label: c.name,
                 value: c.nametag
             }
}));