许多搜索引擎都提供了关键词联想api,且大多数都是jsonp. Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。使用jsonp就不用担心浏览器因同源策略而禁止跨域这种情况的发生了。
以百度为例,
1 window.baidu = { 2 sug: function(json) { 3 vm.sugArray=json.s 4 } 5 } 6 function baiduSug(str){ 7 if(str){ 8 let sug=document.createElement(‘script‘) 9 sug.src=`http://suggestion.baidu.com/su?wd=${str}&cb=window.baidu.sug` 10 document.getElementsByTagName(‘body‘)[0].appendChild(sug) 11 } 12 else vm.sugArray=[] 13 }
百度的api实现方式为动态添加
<script src="http://suggestion.baidu.com/su?wd=冠状病毒&cb=window.baidu.sug">
返回的内容为一个回调函数
window.baidu.sug({q:"冠状病毒",p:false,s:["冠状病毒感染性肺炎","冠状病毒的症状","冠状病毒肺炎","冠状病毒是什么","冠状病毒在空气中可以存活多久","干咳是不是新型冠状病毒","冠状病毒性肺炎","冠状病毒肺炎最新情况","冠状病毒感染","冠状病毒肺炎的起因是什么"]});
回调函数的参数是一个json格式的数据,其中s数组即为联想词数组,我们只需要将回调函数定义出来即可实现想要的效果,例如
1 window.baidu = { 2 sug: function(json) { 3 vm.sugArray=json.s 4 } 5 }
每当动态添加上述<script>便可将联想结果赋给vm.sugArray