is
here is the code
< template >
< div class= "container search-container" id= "app" >
<h1 class="title" >baidu-search</h1>
<input type="text" class="form-control" placeholder="" v-model="keyword" @keyup="get($event)" @keydown.down.prevent="selectDown"
@keydown.up.prevent="selectUp">
<ul>
<li class="text-center" v-for="(value,index) in myData"><span class="text-success textprimary" :class="{gray:index==now}">{{value}}</span></li>
</ul>
<p ><h2 v-show="myData.length==0" class="text-warning text-center">(*^__^*)</h2> < / div >
< / div >
< / template >
< script >
export default {
data () {
return{
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.nowPP;
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];
}
}
}
< / script >
< style scoped >
< / style >
May.08,2021