1

我使用 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>"

如何从renderHtmlvar 显示渲染的 html？

4

1 回答 1

0

这里的工作脚本：

.data( 'ui-autocomplete' )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
    .data( "item.autocomplete", item )
    .append(item.value)
    .appendTo( ul );
};
于 2013-07-11T20:31:56.797 回答