利用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.onload=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];        }    }})