0

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>
4

1 に答える 1

2

この結果が得られます：

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
デモのソースを参照すると、他の例が見つかります。

私の答えがあなたの問題の一部を解決するのに役立つことを願っています。

于 2012-10-03T11:28:32.030 に答える