title: jQuery UI autoComplete with external JSON file
body: <p>I'm trying to write a jQuery UI autocomplete by reading an external file (i.e. data.json).  The code works fine when I try to read it from an array but if I try to read it from an external file, it doesn't work anymore!?!  Not sure why!!</p>
  
  <p>Here's my code:</p>
  
  <p><a href="http://plnkr.co/edit/LPqBGyocpswPrEzjb1Nq?p=preview" rel="nofollow">http://plnkr.co/edit/LPqBGyocpswPrEzjb1Nq?p=preview</a></p>
  
  <p>OR</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
     &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;title&gt;jQuery UI Autocomplete functionality&lt;/title&gt;
        &lt;link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"&gt;
        &lt;script src="http://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
        &lt;script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"&gt;&lt;/script&gt;
        &lt;script&gt;
           $(function() {
              $( "#autocomplete1" ).autocomplete(
              {
                  source:"data.json",
                  select: function( event, ui ) {
                      $( "#autocomplete1" ).val( ui.item.code + " - " + ui.item.label );
                      return false;
                  }
              }).data( "autocomplete" )._renderItem = function( ul, item ) {
                  return $( "&lt;li&gt;&lt;/li&gt;" )
                      .data( "item.autocomplete", item )
                      .append( "&lt;a&gt;" + item.code + " - " + item.label + "&lt;/a&gt;" )
                      .appendTo( ul );
                  };      
  
          });        
        &lt;/script&gt;
     &lt;/head&gt;
  
     &lt;body&gt;
        &lt;input type="text" id="autocomplete1" size=40/&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>/<strong>********************************************************</strong>/</p>
  
  <p>Here's the data.json file:</p>
  
  <pre><code>{   
      {
          "code":"YOO",
          "label":"Oshawa",
          "country":"Canada",
      },
      {
          "code":"YOW",
          "label":"Ottawa Macdonald-Cartier International",
          "city":"Ottawa",
      },
      {
          "code":"YOH",
          "label":"Oxford House",
          "city":"Oxford House",
      } 
  }
  </code></pre>
  
  <p>tks</p>