vue-resource自定义搜索跨域请求实例（百度）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>自定义搜索</title>
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
        <script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js"></script>
        <script type="text/javascript">
            window.onload = function(){
                var vm = new Vue({
                    el:'#box',
                    data:{
                        search:'',
                        baiduUrl:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
                        baiduS:'https://www.baidu.com/s?wd=',
                        mydata:[],
                        nowIndex:-1
                        
                    },
                    methods:{
                        get:function(ev){
                            if(ev.keyCode == 38 || ev.keyCode == 40) return;  //38,40是上下按键
                            if(ev.keyCode == 13){  //13是回车按键
                                if(this.search == '') return
//                              window.open('https://www.baidu.com/s?wd='+this.search)   //新窗口打开
                                location.href = 'https://www.baidu.com/s?wd='+this.search  //直接跳转
                                this.search = ''
                            }
                            this.nowIndex = -1
                            this.$http.jsonp(this.baiduUrl,{
                                params:{
                                    wd:this.search
                                },
                                jsonp:'cb'
                            }).then(function(res){
                                this.mydata = res.data.s
                            })
                        },
                        getBaidu:function(){
                            if(this.search == '') return
//                          window.open('https://www.baidu.com/s?wd='+this.search)   //新窗口打开
                            location.href = 'https://www.baidu.com/s?wd='+this.search  //直接跳转
                            this.search = ''
                        },
                        changedown:function(){
                            this.nowIndex++
                            if(this.nowIndex>=this.mydata.length){
                                this.nowIndex = 0
                            }
                            this.search = this.mydata[this.nowIndex]
                        },
                        changeup:function(){
                            this.nowIndex--
                            if(this.nowIndex<=0){
                                this.nowIndex = this.mydata.length-1
                            }
                            this.search = this.mydata[this.nowIndex]
                        },
                        clicklist:function(num){
                            location.href = 'https://www.baidu.com/s?wd='+this.mydata[num]
                        }
                    }
                })
            }
        </script>
    </head>
    <body>
        <div class="container" id="box">
            <div class="row">
                <div class="col-xs-8 col-xs-push-2 col-sm-6 col-sm-push-3">
                    ![](http://upload-images.jianshu.io/upload_images/3698455-7c1d217a1ab4c377.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                </div>
            </div>
            <div class="form-group form-group-lg">
                <div class="input-group input-group-lg">
                    <input type="text" name="" id="" value="" class="form-control" @keyup="get($event)" v-model="search" @keydown.down.prevent="changedown()" @keydown.up.prevent="changeup()" placeholder=""/>
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" @click="getBaidu()">search</button>
                    </span>
                </div>
            </div>
            <ul class="list-group">
                <li class="list-group-item" v-for="(item,index) in mydata" :class="{'list-group-item-danger':nowIndex == index}" @click="clicklist(index)">{{item}}</li>
            </ul>
        </div>
    </body>
</html>
vue-resource自定义搜索跨域请求实例（百度）

推荐阅读更多精彩内容
