title: jQuery autocomplete 'length' is null or not an object
body: <p>I'm building an ASP.NET MVC 3 application and I'm trying to properly incorporate the <a href="http://jqueryui.com/demos/autocomplete/" rel="nofollow">jQuery autocompletex</a> into one of my pages so a user can type in an ingredient name or choose one from the dropdown.  </p>
  
  <p>I get this error:</p>
  
  <pre><code>Microsoft JScript runtime error: 'length' is null or not an object
  </code></pre>
  
  <p>and my view code looks like this:</p>
  
  <pre><code>$("#ingredientid").autocomplete({
     source: function (request, response) {
        $.ajax({
           url: '@Url.Action("AvailableIngredients", "Recipe")', type: "POST", dataType: "json",
           data: { query: request.term },
           success: function (data) {
              response($.map(data, function (item) {
                 return { label: item, value: item };
              }))
           }
        })
     },
     minLength: 1
  });
  </code></pre>
  
  <p>Things seem to work fine in Firefox, but IE 8 is the standard browser used in-house.</p>
  
  <hr>
  
  <p><strong>Additional:</strong></p>
  
  <p>I'm returning the data - <code>List&lt;string&gt;</code> like so:</p>
  
  <pre><code>public JsonResult AvailableIngredients()
  {
     ... 
     return Json(allIngredients, JsonRequestBehavior.AllowGet);
  }
  </code></pre>
  
  <p>Ideas?</p>