vue2.0，jsonp仿百度搜索页面，请求百度数据

baidu ajax-url : https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wa=a1 页面搭建首先，我们先把页面写好，具体的html+css就不讲解了注意：引用vue、vue-resource,可以下载到本地引用，也可以直接引用cndjs官网上的，当然也可以使用npm下载安装body>div cl

devin-Huang

2850人浏览 · 2017-07-22 09:15:11

devin-Huang · 2017-07-22 09:15:11 发布

baidu ajax-url : https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wa=a

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/1240)
],
        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/baidu ，鼠标划过明天更新下

作者：忠胜
链接：http://www.jianshu.com/p/8cf8f7e3817c
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^