title: jQuery AutoComplete does not show up
body: <p>Inside a jquery dialog I would like to use the jquery autocomplete feature of jqueryUI.</p>
  
  <p>I have then prepared an action in my Controller (I am using ASP.NET MVC2) that is as follow</p>
  
  <pre><code>public ActionResult GetForos(string startsWith, int pageSize)
  {
      // get records from underlying store
      int totalCount = 0;
      string whereClause = "Foro Like '" + startsWith + "%'";
      List&lt;Foro&gt; allForos = _svc.GetPaged(whereClause, "Foro", 0, pageSize, out totalCount);
  
      //transform records in form of Json data
      List&lt;ForoModelWS&gt; foros = new List&lt;ForoModelWS&gt;();
      foreach ( Foro f in allForos)
          foros.Add( new ForoModelWS() { id= Convert.ToString(f.ForoId), 
              text= f.Foro + ", Sezione: " + f.Sezione + ", " + f.AuthorityIdSource.Name });
  
      return Json(foros);
  }
  </code></pre>
  
  <p>The class ForoModelWS is a simple class used only to hold the data that shall be transferred in json. Here it is</p>
  
  <pre><code>public class ForoModelWS
  {
      public string id;
      public string text;
  }
  </code></pre>
  
  <p>On the client side I have the following jquery code:</p>
  
  <pre><code>&lt;input id="theForo" /&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
  
          $("#theForo").autocomplete({
              source: function(request, response) {
                  $.ajax({
                      type: "post",
                      url: "/Foro/GetForos",
                      dataType: "json",
                      data: {
                          startsWith: request.term,
                          pageSize: 15
                      },
                      success: function(data) {
                          response($.map(data, function(item) {
                              return {
                                  label: item.text,
                                  value: item.text
                              }
                          }))
                      }
                  })
              },
              minLength: 2,
              select: function(event, ui) {
              },
              open: function() {
                  $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
              },
              close: function() {
                  $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
              }
          });
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>But the sliding window with the suggeestions does not appear. If I put an alert inside the response function I can see the correct data.</p>
  
  <p>Do I miss something?</p>
  
  <p>Thanks for helping</p>
  
  <p><strong>1st EDIT</strong>:
  Moreover, How to change the code to use the "id" property of the selected element in the returned list?</p>
  
  <p><strong>2nd EDIT</strong>:
  I have checked more with Chrome developer tool and I have seen that when autocomplete starts some error appear. the following:</p>
  
  <pre><code>Uncaught TypeError: Cannot call method 'zIndex' of undefined  @ _assets/js/jquery-ui-1.8.4.custom.min.js:317
  Uncaught TypeError: Cannot read property 'element' of undefined @ _assets/js/jquery-ui-1.8.4.custom.min.js:321
  Uncaught TypeError: Cannot read property 'element' of undefined @ _assets/js/jquery-ui-1.8.4.custom.min.js:320
  </code></pre>
  
  <p>It seems that the autocomplete plugin does not find an element when it tries to set the z-Index of the sliding suggestion 1 level up its container. The first error appear when the jquery UI Dialog opens. The input for the autocomplete is inside a jquery tab that is inside a jquery Dialog </p>
  
  <p><strong>3rd EDIT</strong>:
  I am adding the HTML markup to be complete</p>
  
  <pre><code>&lt;td width="40%"&gt;
     &lt;%= Html.LabelFor(model =&gt; model.ForoID)%&gt;
     &lt;br /&gt;
     &lt;%= Html.HiddenFor(model =&gt; model.ForoID) %&gt;
     &lt;input id="theForo" /&gt;
     &lt;%= Html.ValidationMessageFor(model =&gt; model.ForoID, "*")%&gt;
  &lt;/td&gt;
  </code></pre>