jQuery自动完成显示自定义结果 [英] jquery autocomplete display custom result

问题描述

我使用jQuery自动完成功能，并尝试显示带有缩略图，标题和链接的自定义结果.

I use jQuery autocomplete and try to display custom results with thumbnails, titles, and links.

但是，我在使其工作上遇到了一些困难.

However, I have some difficulties making it work.

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)，将显示自动完成菜单(具有正确的项目编号)，但其中没有任何显示.

With return $(renderHtml), autocomplete menu appears (with the right number of item) but nothing is displayed inside it.

使用return renderHtml，将显示自动完成菜单，并且在每个项目内以文本格式显示正确的内容. 它返回这样的文本:

With return renderHtml, autocomplete menu appears and inside each item appears the right content but in text format. it returns text like this :

"<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?

How can I display rendered html from renderHtml var?

推荐答案

此处为工作脚本:

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

这篇关于jQuery自动完成显示自定义结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！