Question

我正在使用jQueryUI（1.10.2）和jQuery（1.9.1）以及自动完成工具。

我有远程json数据和类别和自定义显示，其中包含json数据中每个项目的图像（显示在自动完成列表中）。

这是我的自动完成初始化

var autoSearch = $("#header-search-text").autocomplete({
    source: function( request, response ) {
        $.ajax({
            //I have items with label, value, category and imgPath info
        });
    },
     focus: function( event, ui ) {
        console.log("focus is ");
        //This line shows "null"
        console.log(ui);
        return false;
    },
    minLength: 4,
    select: function( event, ui ) {
        //Never shows up
        console.log("selected is ");
        console.log( ui.item);/* ?
        "Selected: " + ui.item.label :
        "Nothing selected, input was " + this.value);*/
    },
    open: function() {
        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
    },
    close: function() {
        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
    }
}).data('ui-autocomplete');

我有自定义_renderMenu

//Working
autoSearch._renderMenu = function( ul, items ) {
        var that = this,
        currentCategory = "";
        $.each( items, function( index, item ) {
            console.log(item);
            if ( item.category != currentCategory ) {
                ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                currentCategory = item.category;
            }
            that._renderItem( ul, item );
        });
};

但是当我有了_renderItem时，用于选择的键（向上和向下）不再起作用，我无法点击任何内容（不会：显示悬停的CSS）

autoSearch._renderItem = function(ul, item) {
    console.log("ul is ");
    console.log(ul);
    return $('<li>')
        .data('item.autocomplete', item)
        .append('<img style="width:50px;height:50px;" src="' + base_url + "/"+ item.imgPath + '" alt="" />' + item.label)
        .appendTo(ul);
};

Answer 1

好的，我检查了HTML，显然我在_renderItem中忽略了这一行：

 //Before the appendTo(ul);
.append( $( "<a>" ).text( item.label ) )

我不知道为什么也不知道但是通过添加一个，jQuery会生成一堆像

这样的属性

id="ui-id-7" class="ui-corner-all" tabindex="-1"

自动填充 - 自定义renderItem /菜单和项目选择问题

1 个答案: