title: jQuery UI Autocomplete using a static json file as source
body: <p>I'm using <strong>jquery-ui-autocomplete</strong> (actually, a <strong>catcomplete</strong> attached to a search box). It works vey well as long as I use a static-defined array of items as source.</p>
  
  <p>For performance reasons, I don't want the autocomplete to send Ajax requests to a PHP script making %like% requests to MySQL. So, <strong>I generated a JSON file from the DB</strong>, containing every item that can be matched in the search (about 20-30 items, from many sql tables). I'd like to <strong>read/parse the file</strong> only once, as the page loads or when the user starts to type in the search box.</p>
  
  <p><strong>I'm stuck here.</strong>
  I tried to attach an Ajax call to the .catcomplete() (code below). I also tried to make a getJSON call and create the .catcomplete in its success() method. 
  <strong>Both ways fail silently.</strong></p>
  
  <p>I'm kind of new to JS/jQuery stuff, I already like it, but I'm a bit lost. Any help/solution/pointer to usefull doc would be greatly appreciated.</p>
  
  <p>Thank you very much!</p>
  
  <p>Here is the HTML : (real simple)</p>
  
  <pre><code>&lt;form id="searchform" method="get" role="search"&gt;
      &lt;input id="searchfield" /&gt;
      &lt;input type="submit" name="go" value="go!" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here is my JS code :</p>
  
  <pre><code>$( "#searchfield" ).catcomplete({
  delay: 0,
  source: function( request, response ) {
      $.ajax({
          url: "/path/to/cache.json",
          dataType: "json",
          data: {term: request.term},
          success: function(data) {
              response($.map(data, function(item) {
                  return {
                      label: item.label,
                      category: item.category,
                      desc: item.desc
                  };
              }));
          }
      });
  },
  minlength:0
  });
  </code></pre>
  
  <p>Sample JSON data: </p>
  
  <pre><code>[
  { label: "lbl1", category: "cat1", desc: "desc1"}, 
  { label: "lbl2", category: "cat1", desc: "desc2"}, 
  { label: "lbl3", category: "cat1"}
  ]
  </code></pre>