Question

我们正在从bassistance.de autocomplete转到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 );
    };

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

1 个答案: