jQuery Autocomplete render item is not executed

Question

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,
    delay: 250
}).data("autocomplete")._renderItem = function (ul, item) {
    var temp = item.name;
    return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a>" + item.name + "</a>")
                .appendTo(ul);
};

The input boxes use the same class to call the autocomplete.

  <input id="OtherMake" type="text" maxlength="30" size="20" class="makeClass"/> <!-- It works -->

  <div id="dialogPlus" class="windowBooking">
                                     :
    <input  type="text" id="MakeName"  class="makeClass" /> <!-- doesn't work.-->
                                     :
 </div>

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.

Answer 1

I had a similar issue applying _renderItem() on a class selector but solved it with

$.each($( ".makeClass" ), function(index, item) {
        $(item).data("autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a>" + item.value + " - " + item.label + "</a>")
                .appendTo(ul);
        };
          });

Answer 2

I still don't know what is causing the problem, but I was able to make it work by using the ID instead of using a class to access autocomplete. My guess is that an appended render function cannot be shared between two input boxes? I don't know, if somebody knows the answer and could share with us, it would be great.

Anyway, if somebody happen to have the same weird problem as me and it is stuck with the problem, here is how I solved it. As, I didn't want to repeat the same code twice, I moved all the autocomplete logic to a var and the render function to another var and used the input box ID to assign autocomplete.

  var makeAutocomplete = {
        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,
        delay: 250
    };

    var renderList = function (ul, item) {
        return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a>" + item.name + "</a>")
                .appendTo(ul);
    };

    $("#OtherMake").autocomplete(makeAutocomplete).data("autocomplete")._renderItem = renderList;
    $("#MakeName").autocomplete(makeAutocomplete).data("autocomplete")._renderItem = renderList;

Answer 3

I have this bug too. This is strange that with id as selector _renderItem works correct. I found a quick hack for this issue:

$.ui.autocomplete.prototype._renderItem = function (ul, item) {}