百度下拉框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="./lib/bootstrap.min.css"> <script src="./lib/jquery-1.7.2.js"></script> <script src="./lib/bootstrap.js"></script> <script src="./lib/vue.js"></script> <script src="./lib/vue-resource.js"></script> <style> .g{ background: rgba(0,0,0,.4); } </style> <script> window.onload=function(){ var vue=new Vue({ el:"#box", data:{ t1:"", nowIndex:-1, myData:[] }, methods:{ get:function(ev){ if(ev.keyCode==38||ev.keyCode==40){ return ; }else if(ev.keyCode==13){ window.open("https://www.baidu.com/s?wd="+this.t1); } this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{ wd:this.t1 },{ jsonp:"cb" }).then(function(rps){ if(rps.ok==true){ this.myData=rps.data.s; } },function(err){}); }, changeDown:function(){ this.nowIndex++; if(this.nowIndex>=this.myData.length){ this.nowIndex=0; } this.t1=this.myData[this.nowIndex]; }, changeUp:function(){ this.nowIndex--; if(this.nowIndex<0){ this.nowIndex=this.myData.length-1; } this.t1=this.myData[this.nowIndex]; } } }); } </script> </head> <body> <div id="box"> <input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()"> <ul> <li v-for="(val,index) in myData" :class="{g:index==nowIndex}">{{val}}</li> </ul> <p v-show="myData.length==0">无数据...</p> </div> </body> </html>