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 );
};

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

1 个答案: