Elasticsearch-vue2.0+jsonp请求百度数据获取长尾关键词-iaspnetcore.com

1 页面搭建

首先，我们先把页面写好，具体的html+css就不讲解了

注意：引用vue、vue-resource,可以下载到本地引用，也可以直接引用cndjs官网上的，当然也可以使用npm下载安装

<body>
    <div class="searchBox" id="app">
        <div class="search-wrapper">
            <input class="searchInput" type="text">
            <button>百度一下</button>
        </div>
        <ul>
            <li>这里是数据列表</li>
        </ul>
        <p>暂无数据...</p>
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-resource.min.js"></script>
</html>

2 实例化vue

简单的实例化一个vue，然后el就直接绑定到#app上面就是了，这里有个坑:不能绑定在body或者html上，否则会没效果，就绑定body里面的一个div上就好了。

data里面用到两个数据，一个searchList用来存储百度搜索请求来的数据，一个t1用来双向绑定输入框里面的内容，我们将数据也渲染到页面上，当然要通过输入值调用get方法获取百度数据，接着往下看...

<body>
    <div class="searchBox" id="app">
        <div class="search-wrapper">
            <input class="searchInput" type="text" v-model="t1" @keyup="get">
            <button>百度一下</button>
        </div>
        <ul>
            <li v-for="value in searchList">{{value}}</li>
        </ul>
        <p v-show="searchList.length == 0">暂无数据...</p>
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-resource.min.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      searchList: [
![`G]W$@HOKPLJBZ]T~K05}`G.png](http://upload-images.jianshu.io/upload_images/6756377-a56aeb2b447f2a4c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/600)
],
      t1: ''
    },
    methods: {
      get: function() {
        
      }
    }
  })
</script>
</html>

3 获取百度数据

通过http跨域请求百度搜索数据，再赋给之前我们data数据里面的searchList渲染到页面，这样当输入一个值的时候就会跟新下面弹出的列表了,附上效果图

这里百度请求的路径可以在百度首页f12调试，点击Network，复制请求路径然后进行删减后：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su

methods: {
      get: function() {
        this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{//跨域请求数据
            params: {
                wd: this.t1//输入的关键词
            },
            jsonp: 'cb'//这里是callback
        }).then((res) => {//请求成功回调，请求来的数据赋给searchList数组
            this.searchList = res.body.s
        },(res) => {//失败显示状态码
            alert(res.status)
        })
      }
    }

输入a效果图

3 实现按上下键选择搜索内容

很显然给输入框添加按上下键的事件keydown.down和keydown.up，我们现在添加一个数据now用来保存当前所选中的值，按上键now值++反之则--；再给选择项添加.active类使其背景变成灰色，当v-for循环的索引值index==当前now值就给这个列表项加上类名active(灰色背景标记)。

此处有几个需要注意的地方：
1. 按上键的时候光标会移动到输入值的前面，这是默认事件导致的，所以要在keydown.up后面加上.prevent清除默认事件
2. 上下选择的时候选中的值肯定是要赋给输入框的值的，但是每次按上下键的时候又会触发之前的keyup事件，所以这里要判断按下的键是不是上下键keyup="get($event)" ，if（ev.keyCode == 38 || ev.keyCode == 40 ）return；

<body>
    <div class="searchBox" id="app">
        <div class="search-wrapper">
            <input class="searchInput" type="text" v-model="t1" @keyup="get($event)" @keydown.down="next" @keydown.up.prevent="last">>
            <button>百度一下</button>
        </div>
        <ul>
            <li v-for="(value, index) in searchList" :class="{active: index == now}">{{value}}</li>
        </ul>
        <!-- <p v-show="searchList.length == 0">暂无数据...</p> -->
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-resource.min.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      searchList: [],//搜索弹出列表
      t1: '',//输入框里面的值
      now: -1//输入框里面的值的索引，0为列表第一项
    },
    methods: {
      get: function(evt) {
        if(evt.keyCode == 38 || evt.keyCode == 40) return
        this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{//跨域请求数据
            params: {
                wd: this.t1//输入的关键词
            },
            jsonp: 'cb'//这里是callback
        }).then((res) => {//请求成功回调，请求来的数据赋给searchList数组
            this.searchList = res.body.s
        },(res) => {//失败显示状态码
            alert(res.status)
        })
      },
      next: function() {//向下选择
        this.now ++
        if(this.now == this.searchList.length){//判断是否超出
          this.now = 0
        }
        this.t1 = this.searchList[this.now]
      },
      last: function() {//向上选择
        this.now --
        if(this.now < 0){
          this.now = this.searchList.length -1
        }
        this.t1 = this.searchList[this.now]
      }
    }
  })
</script>
</html>

4 最后一步回车实现搜索

也就是判断当按下的键为enter的时候跳转到搜索页keyCode == 13，键码值（keyCode）可以百度一下。

百度搜索页面的地址也是同上，搜索之后f12—>Network—>js复制地址，删减之后变成 https://www.baidu.com/s?wd="搜索值"，再用window.open()跳转

if (evt.keyCode == 13) {
    window.open('https://wwww.baidu.com/s?wd=' + this.t1)
    this.t1 = ''
}

5 附加鼠标点击选择跳转

给li添加一个鼠标点击事件点击相应的li获取其索引index赋给now同时将对应的值赋给t1再跳转

searchLink: function(index) {//鼠标点击跳转
        this.t1 = this.searchList[index]
        this.now = index
        window.open('https://www.baidu.com/s?wd=' + this.t1)
        this.t1 = ''
      }

最后给上效果访问地址：http://www.lzsfe.cn/project/baidu