title: jquery autocomplete not picking up array
body: <p>I am building a website. On the website I have a search form that should use autocomplete to find data in the database. The backend part is ready but the fron-end part I can not get it to work. I found this post: <a href="https://stackoverflow.com/questions/3694551/is-it-possible-to-change-the-url-which-jquerys-jqueryui-autocomplete-generates">Is it possible to change the Url which JQuery&#39;s JQueryUI Autocomplete generates?</a> but it looks like the response is not used in the searchbar.</p>
  
  <p>I have my webpage running only locally so I can not show it, but the code I have (left some parts such as doctype and head out for easy reading):</p>
  
  <pre><code>    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
      &lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="ui-widget"&gt;
      &lt;label for="country-by-name"&gt;Country: &lt;/label&gt;
      &lt;input id="country-by-name"&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
  $("#country-by-name").autocomplete({
      source: function(req, resp){
                  $.get('/data/country/by-name/'+ encodeURIComponent(req.term), function(json){
                      var numCountries = json['countries'].length;
                      if(numCountries &gt; 0){
                          var countryNames = [];
                          for(var i = 0; i &lt; numCountries; i++){
                              countryNames.push(json['countries'][i]['name']);
                          }
                          resp = countryNames;
                          console.log(resp);
                      }else{
                          resp = [];
                      }
                      return resp;
                  });
              },
      minLength: 2
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The backend works fine, if I for example go to: /data/country/by-name/zi then it retuns json:</p>
  
  <pre><code>{"countries": [{"id": 812, "name": "Brazil"}, {"id": 995, "name": "Swaziland"}, {"id": 1033, "name": "Zimbabwe"}]}
  </code></pre>
  
  <p>This is also picked up by javascript because if I console.log() it shows up:</p>
  
  <pre><code>(3) ["Brazil", "Swaziland", "Zimbabwe"]
  </code></pre>
  
  <p>So the data is there, but not picked up by the automcomplete function of jquery. Does anyone have an idea why "resp" is not used for autocomplete?</p>