1

XMLコンテンツを返すリモートスクリプトによって値が生成されるオートコンプリートテキストボックスを実装しようとしています。JQuery-1.4.3とJQuery-UI-1.8.5のオートコンプリートウィジェットを使用しています。

一度解析されたXMLデータのオートコンプリートデモページの例を調べ、コメントを実装しようとしています。

これは、リモートXMLデータソースを解析する方法のリファレンスとしても役立つはずです。解析は、ソースコールバック内のリクエストごとに発生します。

テストとして、提供されているXMLデモでこれを機能させようとしています。上記のコメントは、オートコンプリートの「ソース」プロパティをAjax呼び出しに置き換える必要があることを示しています。それでも、デモページで提供されている関数でこれを変更すると、次のオートコンプリート関数で結果が得られません。

$( "#birds" ).autocomplete({
  source: function(request, response) {
    $.ajax({
      url: "london.xml",
      dataType: "xml",
      success: function( xmlResponse ) {
        var data = $( "geoname", xmlResponse ).map(function() {
//alert($('name', this).text());
          return {
            value: $( "name", this ).text() + ", " +
                   ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
            id: $( "geonameId", this ).text()
          };
        }).get();
      }
    })
  },
  minLength: 0,
  select: function( event, ui ) {
    log( ui.item ?
         "Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
         "Nothing selected, input was " + this.value );
  }
});

それでも、単純なデバッグポップアップメッセージをコメントアウトすると、Ajax呼び出しがデータの構築に使用された値を取得できることがわかります。私の間違いはどこにありますか？

どんな助けでも大歓迎です！

敬具、

ロンヴァンデンブランデン

4

1 に答える 1

3

Ok、

私は解決策を見つけたので、喜んで自分自身に答えることができます。

最初の試みでは、Ajax 関数の成功コールバックで変数「data」を宣言しましたが、何もしませんでした。解決策は簡単です。ajax 呼び出しが成功した場合に data 変数を返す response() 関数を追加します。完全に修正された関数を追加します (ただし、唯一の変更は 14 行目です)。

$( "#birds" ).autocomplete({
   source: function(request, response) {
     $.ajax({
       url: "london.xml",
       dataType: "xml",
       success: function( xmlResponse ) {
         var data = $( "geoname", xmlResponse ).map(function() {
           return {
             value: $( "name", this ).text() + ", " +
                     ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
             id: $( "geonameId", this ).text()
           };
         });
       response(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: "london.xml",
       dataType: "xml",
       success: function( xmlResponse ) {
         response($( "geoname", xmlResponse ).map(function() {
           return {
             value: $( "name", this ).text() + ", " +
                     ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
             id: $( "geonameId", this ).text()
           };
         }));
       }
     })
   }

(注: これらの関数スニペットは、「リモート XML」オートコンプリート デモに挿入すると機能します)

ふぅ！これを使って何か便利なことをしてみましょう。

ロン

于 2010-10-28T09:15:04.760 に答える