title: Why are JQuery autocomplete results not showing in browser?
body: <p>I have a working fiddle, but the autocomplete does not display anything in the browser.  The fiddle can be seen here: <a href="http://jsfiddle.net/dS5YL/" rel="nofollow">Working Fiddle</a></p>
  
  <p>In the HTML, I have one input element for testing purposes:</p>
  
  <pre><code>&lt;head&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
  
  &lt;script type ="text/javascript" src="myScripts.js"&gt;&lt;/script&gt;
  &lt;script type ="text/javascript" src="jquery.csv-0.71.js"&gt;&lt;/script&gt;
  &lt;script type ="text/javascript" src="csvToArray.v2.1.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
  &lt;div data-role="page" id="main"&gt;
  
      &lt;div data-role="header"&gt;
          &lt;h1&gt;Test&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;div id="contentDiv" data-role="content"&gt;   
          &lt;input type="text" id="food" placeholder="Type (First Name) Here" /&gt;        
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>In my javascript, I am initializing a json variable by reading text from a file.  I have tested that my initialization is successful by displaying an alert of my json variable.  I am trying to use that json variable as the source in my autocomplete.  Below, I have simplified my javascript by hard coding the initialization of the json variable in order to narrow down the problem:</p>
  
  <pre><code>var jsonVersion =       
  [{"description":"mac and cheese", "servingSize":"1 cup", "calories":"500"},
   {"description":"slice of pizza", "servingSize":"1 slice", "calories":"400"},
   {"description":"oreo cookie", "servingSize":"1 cookie", "calories":"100"},
   {"description":"salad", "servingSize":"1 cup", "calories":"50"},
   {"description":"apple", "servingSize":"1 apple", "calories":"70"}];
  
  $('#food').autocomplete({
                       source: jsonVersion,
                       select: function (event, ui) {
                       selectedObj = ui.item;
                       alert("selected object=" + selectedObj.value);
                                                      },
                       minLength: 1
                          });
  </code></pre>
  
  <p>Any idea why this would work in the fiddle but not in the browser?  I am not getting any browser errors.  Simply nothing is being displayed when I type in the textbox.</p>
  
  <p>EDIT</p>
  
  <p>Perhaps it is in the way I am populating my jsonVersion - although when I print the jsonVersion via "alert", it looks right.  Any advice on what I am doing wrong here would be appreciated.  Here is the entire javascript file.  "data" is an array of arrays and I am looping through each of those arrays to create an object, in turn creating an array of Objects.  Then I convert the array of objects to json using stringify:</p>
  
  <pre><code>$(function ($) {
      var jsonVersion;
      var arrayOfObjects;
      $.ajax({
              type: "GET",
              url: "test.js",
              dataType: "text",
              success: function(data) {
                                      data = $.csv.toArrays(data);
                                      arrayOfObjects = new Array();
                                      for(var i=1; i&lt;data.length; i++)//skipping over header
                                      {
                                          var foodObject = new Object();
                                          foodObject.label = data[i][1];
                                          foodObject.weight = data[i][2];
                                          foodObject.servingSize = data[i][3];
                                          foodObject.calories = data[i][4];
                                          arrayOfObjects.push(foodObject);
                                      }
                                      jsonVersion = JSON.stringify(arrayOfObjects);
                                      alert(jsonVersion); 
                                      }
              });
  
      $('#food').autocomplete({
                              source: jsonVersion,
                              select: function (event, ui) {
                              selectedObj = ui.item;
                              alert("selected object=" + selectedObj.value);
                                                              },
                              minLength: 1
                              });
  })
  </code></pre>