How do I tell jquery autocomplete to display one item per line instead of the entire return value in one line?

Question

I'm using Rails 5 with JQuery UI's autocomplete feature. I'm using AJAX to get the appropriate suggestions for my textbox ...

$(function() {
  return $('#s').autocomplete({
    source: function (request, response) {
        $.get("/people/search.js", {
            s: request.term
        }, function (responseStr) {
            data = eval(responseStr);
            // assuming data is a JavaScript array such as
            // [{"value": "SpongeyB", "label": "some label" }, {"value": "SpongeyB", "label": "some label" }...]
            // and not a string
            var jsonData = new Array();
            data.forEach(function (item) {
              var jsonItem = new Object();
              jsonItem.value = item;
              jsonItem.label = item;
              var myString = JSON.stringify(jsonItem);
              jsonData.push( myString );
            });
            response(jsonData);
        });
    }
  });
});

However, when I type something, waht is appearing under my textbox is not a list of options, but rather the entire jsonData as a string ...

How do I tell the autocomplete function to display each item the JSON list on its own line instead of the entire JSON string?

Edit: In response to the answer given I change my line

jsonData.push( myString );

to

jsonData.push( jsonItem );

but I'm still getting only a single line containing all items appearing under my textbox ...

Answer 1

According to the docs under source under function (which is what you are doing):

(data) can be in any of the formats described above for simple local data.

Simple local data states:

There are two supported formats:

• An array of strings: [ "Choice1", "Choice2" ]
• An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

You are doing neither of these.

After the discussion, below, it turns out the response from the server was a string representing an array of strings.

Doing:

$(function() {
  return $('#s').autocomplete({
    source: function (request, response) {
        $.get("/people/search.js", {
            s: request.term
        }, function (responseStr) {
            data = JSON.parse(responseStr);
            response(data);
        });
    }
  });
});

Did the trick.