jQuery Autocomplete 渲染项未执行

Question

我在同一个 HTML 上有两个使用相同自动完成功能的文本框（输入类型文本）。第一个文本框工作正常，但第二个文本框不呈现结果。它与服务器通信，我得到了结果，但渲染函数甚至没有被调用。输入之间的唯一区别是一个在开始隐藏的 div 中，我通过将 z 顺序设置为高并屏蔽 HTML 来显示类似对话框窗口。

这里是第二个输入框所在的div的CSS。

   .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

我仍然不知道是什么导致了问题，但我能够通过使用 ID 而不是使用类来访问自动完成来使其工作。我的猜测是不能在两个输入框之间共享附加的渲染函数？我不知道，如果有人知道答案并可以与我们分享，那就太好了。

不管怎样，如果有人碰巧遇到了和我一样的奇怪问题，并且被问题困住了，我就是这样解决的。因为，我不想重复相同的代码两次，我将所有自动完成逻辑移到一个 var 中，将渲染函数移到另一个 var 中，并使用输入框 ID 来分配自动完成。

  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 2

我在类选择器上应用 _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 3

对我来说，使用jQuery UI AutoComplete 中的appendTo 选项解决了这个问题。

我的问题是该输入字段位于最初未显示的模式中。将其影响到输入的父级解决了问题！

Answer 4

我也有这个问题。奇怪的是，使用 id 作为选择器 _renderItem 可以正常工作。我为这个问题找到了一个快速破解方法：

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