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

我正在从XML文件检索一些结果，并在autosuggest上尝试添加一些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 );
                        }
                    });
                }
            });

$.ajax({
url:“veh.xml”，
数据类型：“xml”，
成功：函数（xmlResponse）{
var data=$（“geoname”，xmlResponse）.map（函数（）{
返回{
值：$（“reg”，this）.text（）
+“
”
+$（“模型”，this）.text（）
};
}).get（）；
$（“#主搜索”）.autocomplete({
资料来源：数据，
最小长度：0，
选择：功能（事件、用户界面）{
日志（ui.item？
选定项：“+ui.item.value+”，地理名称id:“+ui.item.id:
“未选择任何内容，输入为”+this.value）；
}
});
}
});

我得到的结果是：

London,<br/>United Kingdom

伦敦，
英国

我正在尝试创建列表效果

我的xml如下所示：

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


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

伦敦
大不列颠联合王国
巴黎
法国

您将得到以下结果：

London,<br/>United Kingdom

您有一个关于jQuery UI自动完成演示文稿的示例，其中有“自定义数据和显示”：
浏览演示的源代码，您会发现另一个示例

---

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

+1，与我本应该做的差不多，但我会链接到上一个问题selector@MarkSchultheiss我犹豫了一下，但为了更好的可读性，我已经分解了。谢谢。我设法纠正了两个问题。一个是你错过了-和model.this之间的价值线上的+。另一个问题是没有悬停和单击等效果。我在

上添加了class ui菜单项，悬停效果很好。现在的问题是我不能点击一个项目。Thanks@jQuerybeast抱歉，只是忘记了渲染标签周围的

。编辑我的帖子；）享受吧@老实说，当我试图自己解决这个问题的时候，我也试过了，但恐怕不是这个问题。这是另外一个问题。类似的问题：

$.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 );
        };
    }
});