仿百度搜索可用html,Vue 仿百度搜索功能实现代码

无上下选择

jsonp

window.onload = function(){

var vm = new Vue({

el:'#box',

data:{

myData:[],

t1:''

},

methods:{

get:function(){

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{

wd:this.t1

},{

jsonp:'cb'

}).then(function(res){

this.myData=res.data.s

},function(){

});

}

}

});

}

• {{value}}

暂无数据...

加上上下选择

jsonp

.gray{

background: #ccc;

}

window.οnlοad=function(){

new Vue({

el:'body',

data:{

myData:[],

t1:'',

now:-1

},

methods:{

get:function(ev){

if(ev.keyCode==38||ev.keyCode==40){

return;

}

if(ev.keyCode==13){

window.open('https://www.baidu.com/s?wd='+this.t1);

this.t1='';

}

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{

wd:this.t1

},{

jsonp:'cb'

}).then(function(res){

this.myData=res.data.s;

},function(){

});

},

changeDown:function(){

this.now++;

if(this.now==this.myData.length)this.now=-1;

this.t1=this.myData[this.now];

},

changeUp:function(){

this.now--;

if(this.now==-2)this.now=this.myData.length-1;

this.t1=this.myData[this.now];

}

}

});

};

• {{value}}

暂无数据...

以上所述是小编给大家介绍的Vue 仿百度搜索功能实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！