一、前期准备
网上大神已经做过这个功能https://github.com/lavyun/vue-demo-search 这自己仅实现搜索功能 为了使用百度实现搜索功能,首先搞清楚下拉数据和搜索功能的数据接口
打开百度官网打开开发者调试工具,选中network一项,然后我们在搜索框输入'a',将会network发送的请求,这个就是提示数据的数据获取地址
提示数据获取地址.png
然后简化一下:
代码如下:
4041050&_=1497924041057#
提示数据
在输入框中输入“a”之后,点击搜索按钮之后,地址栏中地址就是实现搜索功能的地址
搜索地址.png
搜索地址简化前后对比,是不是看起来很舒服了O(∩_∩)O
我们使用简化之后的地址,搜索关键字“s‘'测试一下
二、代码实现
js代码
});
},selectDown:function () {
this.now++;
if(this.now==this.myData.length)this.now=-1;
this.keyword=this.myData[this.now];
},selectUp:function () {
this.now--;
if(this.now==-2)this.now=this.myData.length-1;
this.keyword=this.myData[this.now];
}
}
})
baidu-search@H_404_67@
搜索关键字" v-model="keyword" @keyup="get($event)" @keydown.down.prevent="selectDown"
@keydown.up.prevent="selectUp">
- 301_69@