title: jQuery UI Autocomplete not showing AJAX results
body: <p>I'm trying to build an autocomplete form which will load JSON from an external database (which returns JSON) on user input. My code seems to work properly as it will log an array containing multiple JSON objects. However, jQuery UI does not show the results on the page itself. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Tables&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class="ui-widget"&gt;
          &lt;input type="text" id="tags" /&gt;
      &lt;/div&gt;
  
      &lt;script src="assets/js/script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(document).ready(function(){
      function createUrl(input){
          var url = "http://forums.zybez.net/runescape-2007-prices/api/" + input;
          return url;
      }
  
      function getSource(input){
          var input = input.term;
          var url = createUrl(input);
  
          $.getJSON(url, function(data){
              var items = [];
  
              $.each( data, function(key, val){
                  items.push(val);
              });
  
              console.log(items); // Shows correct results
  
              return items;
          });     
      }
  
      $("#tags").autocomplete({
          minLength: 2,
          source: getSource
      });
  });
  </code></pre>
  
  <p>What can be the problem? Thanks in regards.</p>