jQuery UI - 格式化自动完成结果.可以添加图片吗？

Question

我们正在从bassistance.de自动完成到jQuery UI自动完成.我找不到jQuery UI版本的那么多例子,文档看起来有点稀疏.那可能只是我.

我想知道是否有人有一个示例/教程解释如何改变自动完成下拉列表的外观.我的代码如下:

$( "#SearchInput" ).autocomplete({
    source: function( request, response ) {
        $.ajax({
            url: "http://servername/index.pl",
            dataType: "json",
            data: {
                term: request.term
            },
            success: function( data ) {
                response( $.map( data.items, function( item ) {
                    return {
                        label: item.id + " - " + item.label,
                        value: item.id
                    }
                }));
            }
        });
    },
});

这有效,我得到的ID和标签显示为连字符分隔.理想情况下,我想知道如何格式化结果的显示方式.我希望ID下面的ID标签.如果可能的话,我想知道如何在文本右侧显示图像.

如果有人对如何实现这一点有任何指示我会很高兴.

Answer 1

JqueryUI网站上有一些关于如何自定义结果布局的文档:http: //jqueryui.com/demos/autocomplete/#custom-data.

一些例子:

$( "#SearchInput" ).autocomplete({ .... }).data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + "<img src='" + item.imgsrc + "' />" + item.id+ " - " + item.label+ "</a>" )
            .appendTo( ul );
    };