<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue</title> <style> .current{ background-color:#ccc; } </style> <script src="https://unpkg.com/vue"></script> <script src="vue-resource/vue-resource.min.js"></script> <script> window.onload=function(){ let app = new Vue({ el:'.container', data:{ keyWord:'', myData:{}, nowIndex:-1 //当前选中项的索引 }, methods:{ getData(e){ //如果按方向上下键，则不发送请求 if(e.keyCode==38||e.keyCode==40) return; this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ params:{ wd:this.keyWord }, jsonp:'cb' //百度使用的jsonp的参数名为 cb }).then(response => { console.log(response.body.s); this.myData=response.body.s; //把数据存起来 },response => { console.log('发送失败'); }) }, changeDown(){ this.nowIndex==this.myData.length-1?this.nowIndex = -1:this.nowIndex++; this.keyWord=this.myData[this.nowIndex]; console.log(this.nowIndex,this.myData.length); }, changeUp(){ this.nowIndex < 0?this.nowIndex = this.myData.length-1:this.nowIndex--; this.keyWord=this.myData[this.nowIndex]; console.log(this.nowIndex,this.myData.length); } } }) } </script> </head> <body> <div class="container"> <input type="text" v-model="keyWord" @keyup="getData($event)" @keydown.down="changeDown" @keydown.up.prevent="changeUp"> <!-- 把数据存起来展示 --> <ul> <li v-for="(value,index) in myData" :class="{current:index==nowIndex}"> {{value}} </li> </ul> <p v-show="myData.length == 0">暂无数据</p> </div> </body> </html>
效果：
