Vue实现百度下拉提示搜索功能
一、前期准备
创新互联是一家集网站建设,荔波企业网站建设,荔波品牌网站建设,网站定制,荔波网站建设报价,网络营销,网络优化,荔波网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
网上大神已经做过这个功能https://github.com/lavyun/vue-demo-search 这自己仅实现搜索功能
为了使用百度实现搜索功能，首先搞清楚下拉数据和搜索功能的数据接口
01、提示数据获取地址
打开百度官网打开开发者调试工具，选中network一项，然后我们在搜索框输入'a',将会network发送的请求，这个就是提示数据的数据获取地址
提示数据获取地址.png
然后简化一下：
其中“wd=”后接搜索的关键字，“cb=”后接回调函数
输入a时，请求的提示数据
02：搜索功能实现地址
在输入框中输入“a”之后，点击搜索按钮之后，地址栏中地址就是实现搜索功能的地址
搜索地址.png
搜索地址简化前后对比，是不是看起来很舒服了O(∩_∩)O
简化地址.png
我们使用简化之后的地址，搜索关键字“s‘'测试一下
测试.png
二、代码实现
js代码
new Vue({
el:'#app',
data:{
myData:[],
keyword:'',
now:-1
},
methods:{
get:function (event) {
if(event.keyCode==38||event.keyCode==40)return;
if(event.keyCode==13){
window.open('https://www.baidu.com/s?wd='+this.keyword);
this.keyword=''
}
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:this.keyword
},{
jsonp:'cb'
}).then(function (res) {
this.myData=res.data.s;
},function () {
});
},
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];
}
}
})
html代码
baidu-search
- {{value}}
(*^__^*)暂时没有数据
get方法实现获取下拉数据和搜索功能，输入keyword之后，调用get方法使用jsonp获取提示数据，然后赋值给myData，然后使用v-for遍历提示数据
提示数据.png
然后selectDown和selectUp实现上下选中数据，当按下回车键时，实现搜索
完整代码：https://github.com/yanqiangmiffy/baidu-search
三、实现效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
当前文章：Vue实现百度下拉提示搜索功能
网页网址：http://cdiso.cn/article/peeoph.html
