Vue 百度搜索

使用Vue和JSONP获取百度的搜索结果

任务：
1. 输入结果，立刻返回百度搜索结果，并展示
2. 键盘上下键可以选中结果列表，增加样式
3. 选中后按回车，跳转到百度搜索页面

效果图：

html:

<div id="app">    <input class="search" type="text" value="按钮" v-model="search" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">    <ul class="item-wrap">        <li v-for="(value, $index) in myData" :class="{gray:$index == now}">            {{value}}        </li>    </ul>    <p class="msg" v-show="myData.length == 0">暂无数据...</p></div>

数据结构为：

data:{    myData: [],    search: '',    now: -1}

1. 搜索

v-model="search" 数据双向绑定和@keyup="get($event)"键盘事件，使搜索立即响应
以下为get函数：
jsonp使用的是vue-resource的$http.jsonp

get:function (e) {    this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{        params:{            wd: this.search // 传入的参数        },        jsonp:'cb' // callback    }).then(function (res) { // 成功        this.myData = res.data.s;    },function (res) { // 错误        console.log(res);    });}

百度路径如下
百度搜索：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=vue&cb=show
返回的结果为：
show({q:"vue",p:false,s:["vue.js","vue.js 教程","vue.js 视频教程","vuex","vue-router","vue cli","vue computed","vue ui","vue2","vue watch"]});
可以使用res.data.s获取数组里的数据。

2. 键盘控制：

2.1结果列表的样式改变

<li v-for="(value, $index) in myData" :class="{gray:$index == now}">    {{value}}</li>

当键盘上下键事件改变变量now，与下标相等时，添加grayclass，达到改变样式的目的

2.2上下键事件

@keydown.down="changeDown()" @keydown.up.prevent="changeUp()"
使用键盘事件的简写@和.down、.up，还有阻止默认事件.prevent

changeDown:function () {    this.now ++;    if (this.now == this.myData.length) {        this.now = -1;    }    this.search = this.myData[this.now];},changeUp:function () {    this.now --;    if (this.now == -2) {        this.now = this.myData.length-1;    }    this.search = this.myData[this.now];}

上下键绑定了input输入框的数据

3. 回车搜索

get函数中增加键盘事件
取消了上下键事件，否则上下键事件使之重复搜索
当点击回车时，打开新窗口，显式搜索结果页面

if (e.keyCode == 38 || e.keyCode == 40) {   return;}if (e.keyCode == 13) {   window.open('https://www.baidu.com/s?wd=' + this.search);   this.search = '';}

完整js代码：

 window.onload = function () {    var app = new Vue({        el: '#app',        data:{            myData: [],            search: '',            now: -1        },        methods:{            get:function (e) {                if (e.keyCode == 38 || e.keyCode == 40) {                    return;                }                if (e.keyCode == 13) {                    window.open('https://www.baidu.com/s?wd=' + this.search);                    this.search = '';                }                this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{                    params:{                        wd: this.search                    },                    jsonp:'cb'                }).then(function (res) { // 成功                    this.myData = res.data.s;                },function (res) { // 错误                    console.log(res);                });            },            changeDown:function () {                this.now ++;                if (this.now == this.myData.length) {                    this.now = -1;                }                this.search = this.myData[this.now];            },            changeUp:function () {                this.now --;                if (this.now == -2) {                    this.now = this.myData.length-1;                }                this.search = this.myData[this.now];            }        }    });};