如何從JSON API響應中創建自動建議？

Question

亞馬遜提供了一個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響應自動建議？

Answer 1

如果您可以使用jqueryui-autocomplete插件，那麼您可以將它的source選項設置爲一個函數，該函數在jqueryui-autocomplete需要的格式與Amazon提供的API之間進行調解。以下應該能夠處理基於您提供的JSON作爲示例的JSONP響應。您可以通過在您的示例URI中添加callback GET參數來查看您提供的API端點是否支持JSONP。例如，http://completion.amazon.com/search/complete?search-alias=aps&client=amazon-search-ui&mkt=1&q=facebook&callback=_將調用中包裝的數據返回給_()。 jQuery通過其dataType: 'jsonp'選項掩蓋了這一點。這對於支持跨網站請求是必要的，因爲您不太可能爲您的網站提供與完成API相同的origin。

/* 
* 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(); });之內。