jquery自动完成显示自定义结果

Question

我使用 jQuery 自动完成功能并尝试使用缩略图、标题和链接显示自定义结果。

但是，我在使它工作时遇到了一些困难。

source: function(req, response){
    $.getJSON(search_ac.url+'?callback=?&action='+acs_action, req, function( data ) {
        response( jQuery.map( data, function( item ) {
            jQuery.each( item, function( i, val ) {
                label = item.label;
                category = item.category;
                thumbnail = item.thumbnail;
                link = item.link;
                renderHtml = "<a class='urlpageautocomplete' href='" + link + "'><div class='image-autocomplete'><img class='normal' src='"+thumbnail+"'/></div>" + "<div class='title-autocomplete'>" + label + "</div><div class='category-autocomplete'>" + category + "</div></a>";
            })
            return $(renderHtml);
        }));
    });
},

使用return $(renderHtml)，会出现自动完成菜单（项目数量正确），但里面没有显示任何内容。

使用return renderHtml，会出现自动完成菜单，并且在每个项目内都会显示正确的内容，但以文本格式显示。 它返回这样的文本：

"<a class='link' href='www.website.com'><div class='image-autocomplete'><img class='normal' src='www.website.com/img.png' /></div><div class='title-autocomplete'>my post title</div><div class='category-autocomplete'>blog</div></a>"

如何显示来自renderHtml var 的渲染html？

Answer 1

这里是工作脚本：

.data( 'ui-autocomplete' )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
    .data( "item.autocomplete", item )
    .append(item.value)
    .appendTo( ul );
};