jQuery UI-格式化自动完成结果.可以添加图片吗? [英] jQuery UI - Formatting the autocomplete results. Add image possible?

问题描述

我们正在从 bassistance.de自动完成迁移到jQuery UI自动完成. 我找不到太多的jQuery UI版本示例，该文档似乎很少.可能就是我.

We're moving from the bassistance.de autocomplete to jQuery UI autocomplete. I can't find as many examples for the jQuery UI version, the documentation seems a little sparse. That could just be me.

我想知道是否有人有示例/教程来说明如何更改自动完成下拉菜单的外观.我的代码如下:

I'd like to know if anyone has an example/tutorial which explains how to alter the look and feel of the autocomplete drop down. My code is as follows:

$( "#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下面的标签.如果可能的话，我想知道如何在文字右侧显示图片.

This works, I get the ID and Label displayed seperated by a hyphen. Ideally I'd like to know how to format how the results are displayed. I'd like the ID then below the ID the label. If possible I'd like to know how to display an image to the right of the text.

如果有人对如何实现这一目标有任何指点，我将不胜感激.

If anyone has any pointers on how to achieve this I'd be greatful.

推荐答案

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

There is some documentation on JqueryUI website on how to customize the result layout: 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-格式化自动完成结果.可以添加图片吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！