Guys, help please, I can not display the data from the request for autocomplete.
I am using this plugin: https://github.com/devbridge/jQuery-Autocomplete

The code is like this:
$ (function () {

function Autocomplete (url, element) {
     element.autocomplete ({
      serviceUrl: url,
      onSelect: function (suggestion) {
       var thehtml = '& lt; strong & gt; Currency Name: & lt; / strong & gt; '+ suggestion.name +' & lt; br & gt; & lt; strong & gt; Symbol: & lt; / strong & gt; '+ suggestion.id;
       $ ('# outputcontent'). html (thehtml);
      }
     });
}
 $ ('. autocompleteSearch input.auto'). keypress (function () {
    Autocomplete ($ (this) .attr ('url'), $ (this));
 });
});

Problem in the output of suggestion.name and suggestion.id

Returns a JSON format like this from the server:

suggestion: {id: [3], name: [Vision correction clinic]}

I did it like that, but it still didn’t work:

$ (function () {
$ ('# autocomplete-ajax'). autocomplete ({
  source: function (request, response) {
    $ .ajax ({
      type: 'POST',
      dataType: 'json',
      url: '/ institution / GetList',
      data: {
        maxRows: 12, // show the first 12 results
        nameStartsWith: request.term // search phrase
      },
      success: function (data) {
        response ($. map (data, function (item) {
          return {
            plink: item.plink, // link to the product page
label: item.title_ru // product name
          }
        }));
      }
    });
  },
  select: function (event, ui) {
    // optional - go to the product page
    // You can print the result to the screen
    location.href = ui.item.plink;
    return false;
  },
  minLength: 3 // start search with three characters
});
});

Handler:

public function GetList () {
    $ res = array ();
    if ($ this- & gt; input- & gt; get ('term')) {
      $ result = $ this- & gt; institutions_model- & gt; GetInstitutions (array ('like' = & gt; $ this- & gt; input- & gt; get ('term')));
      if (! empty ($ result)) {
        foreach ($ result as $ value) {
          $ res [] = array ('id' = & gt; $ value- & gt; idMedicalFacilities, 'name' = & gt; $ value- & gt; MedicalFacilitiesName);
        }
      }
    }
    echo json_encode ($ res);
  }

Writes the following error in the console:

Answer 1, authority 100%

The comment did not fit, so I write in reply

Please provide an example

On the official website, examples of the sea. If that’s not enough, then I can show my own, taken from a real project – a search by a group of goods. (Removed superfluous, schematized server honor, my main settings are in $ .ajaxSetup () )

JS

$ ('# search_field'). autocomplete ({
  source: function (request, response) {
    $ .ajax ({
      data: {
        maxRows: 12, // show the first 12 results
        nameStartsWith: request.term // search phrase
      },
success: function (data) {
        response ($. map (data, function (item) {
          return {
            plink: item.plink, // link to the product page
            label: item.title_ru // product name
          }
        }));
      }
    });
  },
  select: function (event, ui) {
    // optional - go to the product page
    // You can print the result to the screen
    location.href = ui.item.plink;
    return false;
  },
  minLength: 3 // start search with three characters
});

PHP

// Searching the database for the keyword $ _POST ['nameStartsWith']
// If we find something, then we form the answer:
$ response = array ();
while ($ row = $ res- & gt; fetch ()) {
  $ response [] = array (
    'title_ru' = & gt; $ row ['title_ru'],
    'plink' = & gt; itemPath ($ row ['item_id']) // here my function forms a link
    / * you can add whatever you want. At least push mom and dad;) * /
  );
}
echo json_encode ($ response);
exit;

P.S. Ajax options behind the scenes – type: ‘POST’ , dataType: ‘json’ , url: ‘/ yours here /’ , any beforeSend, complete, error – at your discretion. All you have to do is enable the Autocomplete widget and specify your selector for the search form field.