利用jsonp实现百度搜索下拉框

准备：
1）、百度的jsonp接口地址：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su；
2）、请求参数注意：wd:为关键字，cb:回调函数, s:为返回结果的数组
3）、此处以Vuejs框架实现数据渲染，所以需要vue.js 以及它的交互模块：vue-resource.js
正题：
一、引入js

 <script src="../vue.js"></script>     //提供模板支持
 <script src="../vue-resource.js"></script>  //提供交互支持，即$http

二、定义html内容

.active{
    background-color:"#DDD"; 
}

选中项背景色为灰色，以示区分

 <div id="box">
     <input type="text" v-model="search" @keyup="getRes($event)" @keyup.down="next()">
      <ul>
          <li v-for="(index,value) in myData" :class="{active:index==now}">
              {{value}}
          </li>
      </ul>
  </div>

1、通过给input框以v-model指令，将用户输入的值绑定到data中，即双向绑定
2、@keyup——vue封装的keyup事件
3、@keyup.down——vue封装的按下down方向键后的事件
4、v-for遍历数组myData

三、实例化Vue对象
习惯性的将js代码写在body结束前，所以这里我就用不window.οnlοad=function(){}了。。

new Vue({
    el:"#box"  //选择器，这里对应了id为box的一个div
    data:{
        search:"" ,    //用户输入的关键字，初始为空
        now:"-1" ,      //用于按上，下键选择显示的搜索结果功能实现
        myData:[]      //用于放置搜索结果的
    },
    methods:{
        getRes:function(ev){

            if(ev.keyCode==38||ev.keyCode==40) return; //当按下上，下方向键时，不请求结果

            if(ev.keyCode==13){   //按下enter键时，跳转到百度搜索结果页
                window.open('https://www.baidu.com/s?wd='+this.search);
            }
            this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
                wd:this.search   //wd为百度搜索关键字的key名
            },{
                jsonp:'cb'    //回调
            }).then(function(res){
                this.myData=res.data.s      //s为包含搜索结果的数据
            }，function(res){})
        }，
        next:function(){
            this.now++;
            if(this.now==this.myData.length) this.now=0
            this.search=this.myData[this.now];
        }
    }
})