-1

入力中に提案を表示する入力フィールドを実現しようとしています。jqueryのオートコンプリート関数を見つけましたが、phpからのデータソースとしてXMLに苦労しています。私のphpファイルはこのような出力を作成します。

XML：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<locations>
    <location>
        <number>600</number>
        <name>Location Name 600</name>
    </location>

    <location>
        <number>698</number>
        <name>Location Name 698</name>
    </location>

    <location>
        <number>1110</number>
        <name>Location Name 1110</name>
    </location>
</locations>

RoryMcCrossanが投稿したリンクで試してみました。

私のHTMLは次のようになります。

    <!DOCTYPE HTML>
<head>
    <title>Autocomplete</title>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
    <script type="text/javascript">
        $(function() {
        function log( message ) {
            $( "<div/>" ).text( message ).prependTo( "#output" );
            $( "#output" ).scrollTop( 0 );
        }

        $.ajax({
            url: "api.php",
            dataType: "xml",
            success: function(xmlResponse) {
                var data = $("location", xmlResponse).map(function() {
                    return {
                        name: $("name", this).text(),
                        number: $("number", this).text()
                    };
                }).get();

                $("#locations").autocomplete({
                    source: data,
                    minLength: 0,
                    select: function( event, ui ) {
                        log( ui.item ?
                            "Selected: " + ui.item.name + ", number: " + ui.item.number :
                            "Nothing selected, input was " + this.value );
                    }
                });
            }
        });
    });
    </script>
</head>

<body style="background-color: black; color: white;">

<input id="locations" />

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
    Result:
    <div id="output" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

</body>
</html>

入力フィールドに何かを書き込んでからクリアすると、入力フィールドの下に3 liが表示されます（これは、xmlによると、私が持っている場所の数です）が、その横にテキストが表示されていません。何が問題なのですか？

4

2 に答える 2

1

autoCompleteでXMLを使用するには、次の例を参照してください：http: //jqueryui.com/demos/autocomplete/xml.html

于 2012-05-03T09:12:08.930 に答える
0

わかりました、自分自身の解決策を見つけました (JSON 出力を作成することにしました)。Rory McCrossan の例は素晴らしいものでしたが、私が見たところ、xml を 1 回ロードしてから xml 内を検索しただけでした。私が望んでいたのは、事前にフィルター処理された出力でした。これにより、あまり多くのデータが転送されなくなりました。

$(function() {
        $("#locations").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "api.php",
                    dataType: "jsonp", 
                    data: {
                        location: request.term
                    },
                    success: function(data) {
                        response($.map(data.locations, function(item) {
                            return {
                                label: item.name,
                                value: item.nummer
                            }
                        })); 
                    }
                });
            },
            minLength: 0,
            select: function(event, ui) {
                $("<div/>").text(ui.item.label + " " + ui.item.value).prependTo("#output");
            }
        })
    })
于 2012-05-04T10:53:51.037 に答える