Vue实现百度搜索词联想

发表于 | 更新于 | 分类于

最近看别人都在搞，也打算跟风弄个导航页试试，在我看来导航页这玩意没什么太大的区别，前端方面的标准样式就是一个导航链接加一个搜索框加上几个链接块，再美化一下加点特效就差不多成了。

原本打算把搜索做成自动联想链接块的关键词这样的方式，可想了想可能有点鸡肋，在页面链接不多的情况下，这功能会难以触发，而大多数人的常用网站也就十个左右，算上不常用的二三十差不多就到头了。最后决定还是把这当成一个站外搜索的辅助功能，这就需要用到百度接口来做搜索热词联想。

百度搜索接口：

1
'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su'

具体使用方法：

Vue-jsonp

1
https://github.com/LancerComet/vue-jsonp

编辑main.js

1
2
3
4
import { VueJsonp } from 'vue-jsonp'

// Vue Plugin.
Vue.use(VueJsonp)

使用jsonp获得联想词

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
this.$jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
			//val为输入的搜索词
                          wd:val,
			//回调在这种写法下加不加无所谓
                          callbackQuery:'cb',
                          callbackName:'getResult'

						  })
                          .then(res=>{
			//showResult处理收到的res，主要是提取res.s中的联想词
                              this.showResult(res);
                          })
                          .catch(err => {
                              return err;
                          });

最终结果如图