jQuery UIのオートコンプリート（URLからのJSON）

Question

私はjQuery UIオートコンプリート機能を使用しています。私はこれをjQueryのUIで提供されているこの例のように動作させることができます：

var availableTags = [ 
     "ActionScript", 
     "AppleScript", 
     "Asp", 
     "BASIC", 
     "C", 
     "C++", 
     "Clojure", 
     "COBOL", 
     "ColdFusion", 
     "Erlang", 
     "Fortran", 
     "Groovy", 
     "Haskell", 
     "Java", 
     "JavaScript", 
     "Lisp", 
     "Perl", 
     "PHP", 
     "Python", 
     "Ruby", 
     "Scala", 
     "Scheme" 
    ]; 

$("#tags").autocomplete({ 
    source: availableTags 
}); 

これは問題なく動作します。

[{"id":12,"phrase":"Ball"},{"id":16,"phrase":"Football"},{"id":17,"phrase":"Softball"}] 

どのように私は私のURLを使用することができます：私は戻って、このようなJSONを取得し、そのURLに行くよ場合http://mysite.local/services/suggest.ashx?query=ball

：しかし、私はこのように取得することができます誰が私のデータソースとしてJSONを使用する必要がありますデータソースとして？

私はこのようなソース・オプションを変更しようとしました：

$("#tags").autocomplete({ 
    source: "http://mysite.local/services/suggest.ashx" 
}); 

しかし、それは助けにはなりません。私は、サービスがどのキーワードが入力フィールドに入力されたのかわからないと思いますか？

すべてのポインタが優れています。

Answer 1

次の仕様（ウィジェットのdocumentationに記載されています）を満たすようにソースを変更する必要があります。ソース含む配列である（又は含む配列を返す）しなければならない：

• 単純な文字列、または：labelプロパティを含む
• オブジェクト、value性、またはその両方。

リモートソースが返すものを何らかの理由で変更できない場合は、正常に取得したデータを変換することができます。ここではそれを行うだろう方法は次のとおりです。

$("#tags").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: "http://mysite.local/services/suggest.ashx", 
      data: { query: request.term }, 
      success: function (data) { 
       var transformed = $.map(data, function (el) { 
        return { 
         label: el.phrase, 
         id: el.id 
        }; 
       }); 
       response(transformed); 
      }, 
      error: function() { 
       response([]); 
      } 
     }); 
    }); 
}); 

あなたが見ることができるように、あなたはAJAXウィジェットのsourceオプションに機能して渡すことによって自分自身を呼び出すようにする必要があります。

アイデアは$.mapを使用して、オートコンプリートウィジェットが解析できる要素を含む配列に配列を変換することです。

また、AJAXコールに渡されるdataパラメータは、ユーザーが用語を入力すると?query=<term>となることに注意してください。