title: jQuery UI autocomplete bring data from a json file
body: <p>I'm really struggling trying to use the jQuery UI autocomplete plugin. I've had a look at a few demos but I still can't seem to get it to work properly. What I want to do is bring the data from my json file called destination.json. </p>
  
  <p>This is what I have so far:</p>
  
  <pre><code>$( "#autocomplete" ).autocomplete({ 
      source: function(request, response) { 
          $.ajax({ 
              url: "data/destination.json", 
              dataType: "json", 
              success: function( data ) { 
                  response(data.destinations); 
              } 
          }); 
      } 
  }); 
  </code></pre>
  
  <p>&amp; the HTML</p>
  
  <pre><code>&lt;div class="left"&gt;Destination&lt;/div&gt;
  &lt;div class="right"&gt;&lt;input name="autocomplete" type="text" size="27" id="autocomplete"/&gt;&lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>What am I doing wrong? Thank you! </p>
  
  <p>&amp; the JSON</p>
  
  <pre><code>{
  "destinations": [
      {
          "value": "Oceania and Australia",
          "label": "Australia &amp; South Pacific"
      },
      {
          "value": "Australia",
          "label": "Australia"
      },
      {
          "value": "Brisbane",
          "label": "Brisbane-Australia"
      },
      {
          "value": "GoldCoast",
          "label": "GoldCoast-Australia"
      },
      {
          "value": "SunshineCoast",
          "label": "SunshineCoast-Australia"
      } 
   ]
  }
  </code></pre>