jQuery Автозаполнение элемента рендеринга не выполняется

Question

У меня есть два текстовых поля (тип ввода текста) в том же HTML, которые используют одно и то же автозаполнение. Первое текстовое поле работает нормально, но второе текстовое поле не отображает результаты. Он связывается с сервером, и я получаю результаты, но функция рендеринга даже не вызывается. Единственная разница между входными данными состоит в том, что один находится в div, который начинается скрытым, и я показываю вид, подобный окну диалога, устанавливая высокий z-порядок и маскируя HTML.

Вот CSS для div, где находится второе поле ввода.

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

Функция автозаполнения:

$(".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);
};

В полях ввода используется один и тот же класс для вызова автозаполнения.

  <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>

Есть идеи, зачем рендерить в одном поле ввода, а в другом - нет? Позвольте мне прояснить, что во втором поле ввода не работает только функция renderItem, которая по какой-то причине не выполняется. На экране вы можете увидеть множество неопределенных значений, но если вы выберете одно из неопределенных значений, поле ввода заполнится правильным значением.

Answer 1

У меня была похожая проблема с применением _renderItem () к селектору классов, но я решил ее с помощью

$.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

У меня тоже есть эта ошибка.Странно, что с id в качестве селектора _renderItem работает правильно.Я нашел быстрый взлом для этой проблемы:

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

Answer 3

Я до сих пор не знаю, что является причиной проблемы, но я смог заставить ее работать, используя идентификатор вместо использования класса для автозаполнения.Я предполагаю, что добавленную функцию рендеринга нельзя разделить между двумя полями ввода?Я не знаю, если кто-то знает ответ и может поделиться с нами, это было бы здорово.

В любом случае, если у кого-то возникла та же странная проблема, что и у меня, и она застряла с проблемой, вот как я ее решил.Поскольку я не хотел повторять один и тот же код дважды, я переместил всю логику автозаполнения в переменную и функцию рендеринга в другую переменную и использовал идентификатор поля ввода для назначения автозаполнения.

  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 4

Для меня, что было исправлено с помощью опции appendTo из jQuery UI AutoComplete .

Моя проблема заключалась в том, что это поле ввода находилось внутри модального окна, которое сначала не отображалось. При воздействии на него родительский элемент ввода устранил проблему!