Question

我目前的代码是使用jQuery 1.7.x.我想升级到jQuery 1.8，但我遇到了自动完成功能的问题。我用相同的代码创建了2个jsfiddles。在一个示例中，它可以正常工作，而另一个例子则不然。主要问题是当您搜索并单击时，应显示警告框并说明所点击的内容。它适用于旧的jQuery，但不适用于1.8。

这是有效的1.7版本 - http://jsfiddle.net/u2GEe/1/

这是破碎的1.8版本 - http://jsfiddle.net/TPWXh/3/

以下是代码：

$.widget("custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function(ul, items) {
        var self = this,
            currentCategory = "";
        $.each(items, function(index, item) {
            if (item.category != currentCategory) {
                ul.append("<li class='ui-autocomplete-category search-dropdown-category'>" + item.category + "</li>");
                currentCategory = item.category;
            }
            self._renderItem(ul, item);
        });
    }
});
$(document).ready(function() {
var data = [
    {
    label: "anders",
    category: "aa"},
{
    label: "andreas",
    category: "aa"},
{
    label: "antal",
    category: "aa"},
{
    label: "annhhx10",
    category: "Products"},
{
    label: "annk K12",
    category: "Products"},
{
    label: "annttop C13",
    category: "Products"},
{
    label: "anders andersson",
    category: "People"},
{
    label: "andreas andersson",
    category: "People"},
{
    label: "andreas johnson",
    category: "People"}
];

$("#search_input").catcomplete({
    source: data,
    select: function(event, ui) {
        alert(ui.item.label);
    }
});


});

任何人都知道这笔交易是什么？

Answer 1

花了几天后，我终于明白了。这是一行：

 self._renderItem(ul, item);

现在需要

self._renderItemData(ul, item);

我改变后，一切都恢复正常。非常令人沮丧。

Answer 2

通过记录select回调中的值，我注意到item为undefined。

$("#search_input").catcomplete({
    source: data,
    select: function(event, ui) {
        console.log(event, ui); // DEBUG
        alert(ui.item.label);
    }
});

不确定为什么jQuery 1.8.2和jQuery UI 1.9.1不能协同工作但是我使用jQuery UI 1.8.2 而不是1.9.1。

尝试here。

jQuery 1.8自动完成与类别问题

2 个答案: