jQuery：自动建议从 XML 解析的结果并自定义这些解析结果

Question

我正在从 XML 文件中检索一些结果，并且在自动建议中我正在尝试添加一些 html 代码：

London, <br/>
United Kingdom

我的代码是这样的：

$.ajax({
                url: "veh.xml",
                dataType: "xml",
                success: function( xmlResponse ) {
                    var data = $( "geoname", xmlResponse ).map(function() {
                        return {
                            value: $( "reg", this ).text() 
                                   + '<br/>'
                                   + $( "model", this ).text()
                        };
                    }).get();
                    $( "#mainsearch" ).autocomplete({
                        source: data,
                        minLength: 0,
                        select: function( event, ui ) {
                            log( ui.item ?
                                "Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
                                "Nothing selected, input was " + this.value );
                        }
                    });
                }
            });

我得到了这个结果：

London,<br/>United Kingdom

我正在尝试创建列表效果。

我的 xml 看起来像这样：

<geoname>
    <model>London</model>
    <reg>United Kingdom</reg>
    </geoname>


<geoname>
    <model>Paris</model>
    <reg>France</reg>
    </geoname>

Answer 1

你得到这个结果：

London,<br/>United Kingdom

因为自动完成使用的默认渲染是 li 元素，并且数据只是作为文本而不是 html 输入的。

因此，要更改渲染，您必须覆盖默认渲染项并在您的项目中添加数据。

$.ajax({
    url: "veh.xml",
    dataType: "xml",
    success: function( xmlResponse ) {

        var data = $( "geoname", xmlResponse ).map(function() {
            return {
                value: $( "reg", this ).text() + '-' + $( "model", this ).text(),
                reg: $( "reg", this ).text(),
                model: $( "model", this ).text()
            };}).get();

        $( "#mainsearch" ).autocomplete({
            source: data,
            minLength: 0,
        focus: function( event, ui ) {
            $( "#mainsearch" ).val( ui.item.label );
            return false;
        },
            select: function( event, ui ) {
                log( ui.item ?
                     "Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
                     "Nothing selected, input was " + this.value );
            }
        }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li class='ui-menu-item' role='menuitem'></li>" )
                   .data( "item.autocomplete", item )
                   .append( "<a>" + item.reg + "<br />" + item.model +"</a>")
                   .appendTo( ul );
        };
    }
});

您有一个关于 jQuery-UI 自动完成演示文稿的示例，带有“自定义数据和显示”：http://jqueryui.com/demos/autocomplete/#custom-data
浏览演示的源代码，您会发现另一个示例。

希望我的回答能帮助您解决部分问题。