亚马逊提供了一个 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 响应创建自动建议?
最佳答案
如果可以使用jqueryui-autocomplete插件,然后你可以设置它的source一个函数的选项,它在 jqueryui-autocomplete 需要的格式和亚马逊提供的 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'
选项掩盖了这一点。这是支持跨站点请求所必需的,因为您不太可能使用 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(); });
中运行。
关于php - 如何根据 JSON API 响应创建自动建议?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17417201/