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];
            }
        }
    });
};