vue如何实现百度搜索下拉提示功能-创新互联
这篇文章给大家分享的是有关vue如何实现百度搜索下拉提示功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
成都创新互联服务项目包括八宿网站建设、
八宿网站制作、八宿网页制作以及八宿网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，
八宿网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到八宿省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
Vue的优点
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。
这段代码用到vuejs和vue-resouece。实现对接智能提示接口，并通过上下键选择提示项，按enter进行搜索
Document
window.onload = function() {
var app = new Vue({
el: '#box',
data: {
myData: [],
tt: '',
now: -1
},
methods: {
get: function(e) {
// 请求限制 按了上下箭头
if (e.keyCode === 38 || e.keyCode === 40) {
return
}
// enter跳转
if (e.keyCode === 13) {
window.open('https://www.baidu.com/s?wd=' + this.tt);
this.tt = '';
}
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
wd: this.tt
}, {
jsonp: 'cb'
}).then(function(res) {
// 请求成功
this.myData = res.data.s;
this.now = -1;
}, function(res) {
// 请求失败
console.log(res.status)
})
},
changeDown: function() {
this.now++;
// 到了最后一个选项
if (this.now === this.myData.length) {
this.now = -1;
}
this.tt = this.myData[this.now]
},
changeUp: function() {
this.now--;
// 到了第一个选项
if (this.now === -2) {
this.now = this.myData.length - 1;
}
this.tt = this.myData[this.now]
}
}
})
}
.gray {
background: gray
}
效果图：
这个ajax请求没有做节流，很多时候需要限制ajax频繁请求，可以小改一下：
Document
window.onload = function() {
var app = new Vue({
el: '#box',
data: {
myData: [],
tt: '',
now: -1
},
methods: {
get: function(e) {
// 请求限制 按了上下箭头
if (e.keyCode === 38 || e.keyCode === 40) {
return
}
// enter跳转
if (e.keyCode === 13) {
window.open('https://www.baidu.com/s?wd=' + this.tt);
this.tt = '';
}
// 限制频繁请求
this.throttle(this.getData,window)
},
changeDown: function() {
this.now++;
// 到了最后一个选项
if (this.now === this.myData.length) {
this.now = -1;
}
this.tt = this.myData[this.now]
},
changeUp: function() {
this.now--;
// 到了第一个选项
if (this.now === -2) {
this.now = this.myData.length - 1;
}
this.tt = this.myData[this.now]
},
// 把请求单独拿出来
getData() {
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
wd: this.tt
}, {
jsonp: 'cb'
}).then(function(res) {
// 请求成功
this.myData = res.data.s;
this.now = -1;
}, function(res) {
// 请求失败
console.log(res.status)
})
},
// 节流函数
throttle(method,context){
clearTimeout(method.tId);
method.tId=setTimeout(function(){
method.call(context);
},300);
}
}
})
}
.gray {
background: gray
}
感谢各位的阅读！关于“vue如何实现百度搜索下拉提示功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
