vue版本是1.0.21
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉搜索框</title> 6 <script src="vue.js"></script> 7 <script src="vue-resource.js"></script> 8 9 <style> 10 .gray{ 11 background-color: #ccc; 12 } 13 </style> 14 <script type="text/javascript"> 15 window.onload = function(){ 16 new Vue({ 17 el:"body", 18 data:{ 19 myData:[], 20 t:"", 21 now:-1, 22 }, 23 methods:{ 24 get:function(e){ 25 if(e.keyCode == 38 || e.keyCode == 40 ) return; 26 if(e.keyCode == 13){ 27 window.open('https://www.baidu.com/s?wd='+this.t); 28 this.t=''; 29 } 30 this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ 31 wd:this.t 32 },{ 33 jsonp:"cb" 34 }).then(function(res){ 35 this.myData = res.data.s; 36 },function(res){ 37 alert(res.status); 38 }) 39 }, 40 changeDown:function(){ 41 this.now++; 42 if(this.now == this.myData.length) this.now=-1; 43 this.t = this.myData[this.now]; 44 }, 45 changeUp:function(){ 46 this.now--; 47 if(this.now==-2) this.now=this.myData.length-1; 48 this.t = this.myData[this.now]; 49 } 50 51 } 52 }) 53 } 54 </script> 55 </head> 56 <body> 57 <input type="text" v-model="t" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()" /> 58 <ul> 59 <li v-for="item in myData" :class="{gray:$index == now}">{{ item }}</li> 60 </ul> 61 <p v-show="myData.length==0">暂无数据...</p> 62 </body> 63 </html>