jQuery Autocomplete render item is not executed
<p>I have two textboxes (input type text) on the same HTML that use the same autocomplete. The first text box works fine, but the second text box do not render the results. It communicate with the server and I get the results, but the rendering function is not even called. The only difference between the inputs is that one is in a div that start hidden and I show kind like Dialog window by setting z-order high and masking the HTML.</p>

<p>Here is the CSS for the div where the second input box is located.</p>

<pre><code>   .windowBooking  {
      position:absolute;
      width:450px;
     /* height:200px; */
      display:none;
      z-index:9999;
      padding:20px;
    }
</code></pre>

<p>The autocomplete function:</p>

<pre><code>$(".makeClass").autocomplete({
    source: function (request, response) {
        $('#Code').val(); //clear code value
        $.ajax({
            url: "myUrl",
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            dataType: 'json', //What kind of Result is expected. (Ex json, xml, etc)
            data: "{'searchItem':'" + request.term + "'}",
            success: function (data) {
                var item = [];
                var len = data.d.length;
                for (var i = 0; i &lt; len; i++) {
                    var obj = { name: data.d[i].MakeReport, code: data.d[i].MakeCode };
                    item.push(obj);
                }
                response(item);
            }
        })
    },
    focus: function (event, ui) {
        $(this).val(ui.item.name);
        return false;
    },
    select: function (event, ui) {
        $('#Code').val(ui.item.code);
        $('#Name').val(ui.item.name);
        $(this).val(ui.item.name);
        return false;
    },
    open: function () {
        $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
    },
    close: function () {
        $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
    },
    minLength: 2,
    delay: 250
}).data("autocomplete")._renderItem = function (ul, item) {
    var temp = item.name;
    return $("&lt;li&gt;&lt;/li&gt;")
                .data("item.autocomplete", item)
                .append("&lt;a&gt;" + item.name + "&lt;/a&gt;")
                .appendTo(ul);
};
</code></pre>

<p>The input boxes use the same class to call the autocomplete.</p>

<pre><code>  &lt;input id="OtherMake" type="text" maxlength="30" size="20" class="makeClass"/&gt; &lt;!-- It works --&gt;

  &lt;div id="dialogPlus" class="windowBooking"&gt;
                                     :
    &lt;input  type="text" id="MakeName"  class="makeClass" /&gt; &lt;!-- doesn't work.--&gt;
                                     :
 &lt;/div&gt;
</code></pre>

<p>Any ideas, why render on one input box and no in the other input box? Let me make clear, on the second input box the only thing not working is the renderItem function which for some reason it doesn't get executed. On the screen, you can see a lot of undefined but if you select any of the undefined values then the input box is filled with the correct value.</p>
