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.

Here is the CSS for the div where the second input box is located.

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

The autocomplete function:

$(".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 < 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
javascript jquery autocomplete
Edit
Report