javascript - 将 jQuery UI 从 1.8 更新到 1.12 时,Catcomplete 小部件停止工作

标签 javascript jquery jquery-ui jquery-widgets

这是我的代码,在我更新到 jQuery UI 1.12 之前一直运行良好

var currentCategory = "";
$.widget("custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function (ul, items) {
        var self = this;
        $.each(items, function (index, item) {
            if (item.category != currentCategory) {
                ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                currentCategory = item.category;
            }
            self._renderItem(ul, item);
        });
    },
    _renderItem: function (ul, item) {
        var clase = '';
        switch (item.category) {
        case 'Usuarios':
            return $("<li class='" + clase + "'></li>")
                .data("item.autocomplete", item)
                .append("<a><img src='" + item.img + "' /><span class='name'>" + item.value + "</span></a>")
                .appendTo(ul);
            break;
        case 'Posts':
            return $("<li class='" + clase + "'></li>")
                .data("item.autocomplete", item)
                .append("<a><img src='" + item.img + "' /><span class='name'>" + item.value + "</span><span class='sub'><i class='fa fa-bookmark-o'></i> " + item.sub + "</span> <span class='sub'>" + item.votos + "<i class='fa fa-thumbs-o-up'></i></span> </a>")
                .appendTo(ul);
            break;
        }
    }
});

这就是我使用它的方式:

$("#recipeName").catcomplete({
        source: "/jsonR.php",
        minLength: 2,
        selectFirst: true,
        select: function (event, ui) {
            console.log(ui); /* this logs Object item:undefined */
            var url = '';
            if (ui.item.category == 'Posts') {  /* This is line 1692 */
                url = 'http://example.com/page.php?id=' + ui.item.id;
            }
            location.href = url;
            return false;
        },
        selectFirst: true,
        open: function () {
            $('.ui-autocomplete').addClass('searchBox');
            currentCategory = "";
        }
    });

此代码正确呈现列表,问题是当我选择一个选项时:

cached.js:1692 Uncaught TypeError: Cannot read property 'category' of undefined(…)

知道我应该从这段代码中重新调整什么才能与 jquery ui 1.12 一起使用吗?

-编辑-

我注意到,如果使用 self._renderItemData(ul, item) 而不是 self._renderItem(ul, item),则选择有效,

问题是当我悬停一个元素时出现错误(并且光标不是指针......):

jquery-ui.js:5840 Uncaught TypeError: 无法读取未定义的属性“值”(…)

这是 jquery ui 上的第 5840 行:

// Announce the value in the liveRegion
label = ui.item.attr( "aria-label" ) || item.value;

有什么想法吗?

最佳答案

我缺少 _create 方法,我不确定在旧版本中是否有必要

$.widget("custom.catcomplete", $.ui.autocomplete, {
   _create: function() {
            this._super();
            this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
    }
    // Rest of code..
});

关于javascript - 将 jQuery UI 从 1.8 更新到 1.12 时,Catcomplete 小部件停止工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40367481/

相关文章:

javascript - 自调整 Javascript 倒计时

javascript - 如何在 angularjs 中的单选按钮中应用自动保存概念?

javascript - 滞后于 onmousemove 和 div 位置

jquery - 根据屏幕尺寸重新排列 DOM 的最佳方法

javascript - 如何检查日期时间本地输入字段是否小于其他日期时间本地字段

javascript - 单个 ESC 关闭 jQuery UI 中的所有模式对话框。解决方法?

javascript - WebSocket 发送有关连接的额外信息

javascript - 从 div 或模板中获取所有 Handlebars 表达式?

jQuery UI 可拖动和页面滚动(在移动设备上)

javascript - 从二维数组中选择大量选项的最佳自动完成功能?