Question

我正在从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 );
                        }
                    });
                }
            });

我得到了这个结果：

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
浏览演示源，你会发现另一个例子。

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

jQuery：从XML解析的Autosuggest结果，并自定义这些已解析的结果

1 个答案: