jquery-ui - 在 jquery 自动完成中重写 _rendermenu 会引发 js 错误

Question

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

未捕获类型错误:无法读取 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您将看到错误的原因:

Creation of the individual <li> elements should be delegated to _renderItemData(), which in turn delegates to the _renderItem() extension point.

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

要修复此问题，您所需要做的就是将对 _renderItem 的调用更改为调用 _renderItemData:

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