3

Amazon は、入力された文字の候補を取得するための API を提供しています。

 http://completion.amazon.com/search/complete?search-alias=aps&client=amazon-search-ui&mkt=1&q=facebook

応答が返されます:

["facebook",["facebook","facebook login","facebook.com","facebook credits","facebook gift card","facebook app","facebook messenger","facebook for dummies","facebook en español","facebook phone"],[{"nodes":[{"alias":"mobile-apps","name":"Apps for Android"},{"alias":"stripbooks","name":"Books"},{"alias":"textbooks-tradein","name":"Books Trade-in"},{"alias":"digital-text","name":"Kindle Store"}]},{},{},{},{},{},{},{},{},{}],[]]

jQuery または PHP を使用して、この JSON 応答から自動提案を作成するにはどうすればよいですか?

4

1 に答える 1

5

jqueryui-autocompleteプラグインを使用できる場合は、そのsourceオプションを、jqueryui-autocomplete が必要とする形式と Amazon が提供する API の間を仲介する関数に設定できます。以下は、例として示している JSON に基づいて JSONP 応答を処理できるはずです。callbackサンプルの URI に GET パラメーターを追加すると、指定した API エンドポイントが JSONP をサポートしていることがわかります。たとえば、http://completion.amazon.com/search/complete?search-alias=aps&client=amazon-search-ui&mkt= 1&q=facebook&callback=_は、への呼び出しでラップされたデータを返します_()。jQuery は、そのdataType: 'jsonp'オプションを使用してこれに対処します。これはクロスサイト リクエストをサポートするために必要です。originは補完 API と同じです。

/*
 * Connect all <input class="autocomplete"/> to Amazon completion.
 */
jQuery('input.autocomplete').autocomplete({
  source: function(request, response) {
    jQuery.ajax('http://completion.amazon.com/search/complete', {
      /* Disable cache breaker; potentially improves performance. */
      cache: true,
      data: {
        client: 'amazon-search-ui',
        mkt: 1,
        'search-alias': 'aps',
        q: request.term
      },
      error: function() {
        /*
         * jquery-autocomplete’s documentation states that response()
         * must be called once per autocomplete attempt, regardless
         * of whether or not the background request completed
         * successfully or not.
         */
        response([]);
      },
      success: function(data) {
        /*
         * Amazon returns an array of different types of
         * autocomplete metadata. The second member is a
         * list of terms the user might be trying to type.
         * This list is compatible with jqueryui-autocomplete.
         */
        response(data[1]);
      },
      dataType: 'jsonp'
    });
  }
});

DOM の準備が整ったら、jQuery(document).ready(function() { statements_here(); });.

于 2013-07-02T06:20:15.080 に答える