Question

我试图在jquery自动完成中覆盖_rendermenu。该列表正在生成，但每次我将鼠标悬停在结果上时都会出现以下js错误

未捕获的TypeError：无法读取属性＆＃39;值＆＃39;在jquery-ui.js中未定义

使用的代码是

$(function () {
var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl",
                "PHP",
                "Python",
                "Ruby",
                "Scala",
                "Scheme",
                "AA",
                "BB",
                "CC",
                "DD",
                "EE",
                "FF",
                "GG",
                "HH",
                "II",
                "JJ",
                "KK"
            ];


   var atComplete=$( "#autoCompleteText" ).autocomplete({
        delay:0,
        source:availableTags,
             autoFocus: true,
             minLength: 0,
             appendTo: "#result"          
}).focus(function () {
                $(this).autocomplete("search");
 }).data('ui-autocomplete');
   atComplete._renderMenu = function( ul, items ) {
            var that = this;
            $.each( items, function( index, item ) {
                    that._renderItem( ul, item );
            });
    };

    atComplete._renderItem = function(ul, item) {
        console.log("item in render item:",item);
            return $("<li>").data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul);
    };
});

Answer 1

如果查看API docs for _renderMenu，您会看到错误原因：

创建个人＆lt; li＆gt;应该将元素委托给_renderItemData（），后者又委托给_renderItem（）扩展点。

您直接使用renderItem()。这意味着您实际上并没有将项目数据绑定到.data('ui-autocomplete-item')缓存，窗口小部件在绘制菜单时尝试读取这些缓存 - 但由于它未定义，因此该页面会抛出错误。

要解决此问题，您只需将呼叫更改为_renderItem即可拨打_renderItemData：

atComplete._renderMenu = function( ul, items ) {
        var that = this;
        $.each( items, function( index, item ) {
                that._renderItemData( ul, item );
        });
};

在jquery autocomplete中重写_rendermenu会抛出js错误

1 个答案: