<!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">
</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自定义搜索跨域请求实例（百度）
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 今天看到某跨域请求，会把appId， appKey这种每次都需要传的字段放在Header中。 这样我们只用关注真正...
- (1) babel-polyfill 在低版本的浏览器中不能支持es6语法，所以用babel-polyfill来解...
