仿百度查询

JS

new Vue({
        el:'#app',
        data:{
            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.now++;
                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];
            }
        }
    })

HTML

<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></p>
</div>