Question

我一直在寻找几个小时，我似乎无法弄清楚我需要做什么。我在JQuery UI 1.8.16中使用了旧版本的Autocomplete。在你悲伤地问我之前我无法升级它。我正在尝试设置自定义数据显示，因此我正在使用文档中的“自定义数据”示例。我的代码是以示例所期望的格式正确构造的，但是我添加了一些我需要的其他密钥。我的结构看起来就像我在这个jsBin中提供的那样。 http://jsbin.com/zut/1/edit

我需要覆盖select和focus功能。按照例子后。我为模板部分定义了此代码。

        .data("autocomplete")._renderItem = function(ul, item) {
                var template;
                if (item.isActive === true) {
                    template = "<a>" + item.label + item.desc + item.status + "</a>";
                } else {
                    template = "<a >" + item.label + item.desc  + "<span class='inactive'>" + item.status 
                    + "</span></a>";
                }

                return $("<li>")
                    .append(template) // .append("<a>" + item.label + item.desc + "</a>")
                    .appendTo(ul);
        };
    },

这使得模板很好但是我在select和焦点中收到“ui”参数的“未定义”，特别是“TypeError：ui.item is undefined”

我尝试将.data（“autocomplete”）更改为.data（“ui-autocomplete”）这将摆脱“TypeError：ui.item未定义”但是现在所有额外的模板数据都消失了我m只显示标签。

我把它放回去，然后使用._renderItemData与._renderItem混淆，这导致与上面相同。原始错误消失但是所有额外的文本都消失了。

我有点失落，所有的帮助将不胜感激！我只想在覆盖select和focus值的同时显示额外的自定义文本。到目前为止，我发现的所有“修复”似乎都解决了一个问题，但打破了所有“自定义数据”。

Answer 1

您缺少将数据设置为li

的设置

.data("autocomplete")._renderItem = function (ul, item) {
    var template;
    if (item.isActive === true) {
        template = "<a>" + item.label + item.desc + item.status + "</a>";
    } else {
        template = "<a >" + item.label + item.desc + "<span class='inactive'>" + item.status + "</span></a>";
    }

    return $("<li>")
        //missing this
        .data( "item.autocomplete", item )
        .append(template)
        .appendTo(ul);
};

演示：Fiddle

请参阅http://code.jquery.com/ui/1.8.16/jquery-ui.js处的原始实施，此数据值已设置

JQuery UI Autocomplete选择返回undefined

1 个答案: