用vue的jsonp写了个百度搜索的demo

最新推荐文章于 2022-09-14 22:22:36 发布

老虎帅呆了

最新推荐文章于 2022-09-14 22:22:36 发布

阅读量1.5k

点赞数 4

分类专栏： vue javascript 文章标签：搜索 vue

本文链接：https://blog.csdn.net/fanhu6816/article/details/53763130

版权

javascript 同时被 2 个专栏收录

52 篇文章 0 订阅

订阅专栏

vue

9 篇文章 0 订阅

订阅专栏

源代码可以到我的github上下载 https://github.com/fanhu371328/vue-

一：页面代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue百度搜索</title>
    
    <link rel="stylesheet" href="css/mobile.common.css"/>
    <link rel="stylesheet" href="css/main.css"/>
  </head>
  <body>
    <div id="app">
    		<h3 class="title">给我搜</h3>
    		
    		<!--展示部分-->
	    <div class="content">
	    		<div class="first">
	    			<div class="content_input clearfix">
				      <input type="text" class="search_field" @keyup="get($event)" @keydown.down.prevent="changeDown"  @keydown.up.prevent="changeUp" v-model='msg' placeholder="输入要搜索的内容">
				      <button class="search_btn" @click='open'>查询</button>     
				</div>
	    		</div>
	    		<ul class="list">
	    			<li v-for="item in messages" :class="{active:$index==now}" @mouseover="change($index)" @click='open'> {{item}} </li>
	    		</ul>
	    		<p v-show='messages.length==0'>暂无数据...</p>
	    </div>
	    
    </div>
  </body>
  <script src="./js/vue.js"></script>
  <script src="js/vue-resource.js"></script>
  <script src="js/index.js"></script>
</html>

二：样式

#app{width: 100%;height: 100%;}
.title {width: 100%;text-align: center;line-height: 50px;color: #fff;background: yellowgreen;}
.content {width: 639px;margin: 50px auto;position: relative;}
.content .first {width: 100%;font-size: 0;}
/*---------------------------------------------搜索框*/
.content_input .search_field{ /*输入框样式*/
    width: 536px;
    height: 38px;
    line-height: 38px;
    border: 1px solid #3388FF;
    float: left;
    padding-left: 10px;
    font-size: 18px;
    color: #666;
}
.content_input .search_btn{ /*按钮样式*/
    width: 103px;
    height: 38px;
    line-height: 38px;
    color: #FFFFFF;
    font-weight: 600;
    background: #3388FF;
    border:none;
    float: left;
    font-size: 20px;
}
/*===-----------------------------*/
.list {border: 1px solid #ccc;border-top: none;}
.list li{font-size: 18px;padding:5px 10px;}
.content>p {font-size: 18px;}
.active {background: #f0f0f0;}

三：js

(function(){
	//提交留言
	new Vue({
  		el:'#app',
  		data:{ //数据
  			msg:'',
  			msg1:'',
  			messages:[],
  			now:-1
  		},
  		methods:{ //方法 这里的this就是new的vue对象
  			get:function(e){
  				//保存输入框中输入的内容
  				this.msg1=this.msg;
  				if(e.keyCode == 38 || e.keyCode == 40){
  					return;
  				}
  				if(e.keyCode == 13){
  					window.open('https://www.baidu.com/s?wd='+this.msg);
  					this.msg='';
  					return;
  				}
				this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+ this.msg,{
					jsonp:'cb',
				}).then(function(data){
					this.messages=data.data.s;
				},function(){
//					console.log("erro");
				})
			},
			open:function(){
				window.open('https://www.baidu.com/s?wd='+this.msg);
				this.msg='';
			},
			changeDown:function(){
				this.now++;
				if(this.now >= this.messages.length){
					this.now = -1
				}
				this.msg=this.messages[this.now];
			},
			changeUp:function(){
				this.now--;
				if(this.now <= -2){
					this.now = this.messages.length -1 ;
				}
				this.msg=this.messages[this.now];
			},
			change:function(index){
				this.now=index;
				this.msg=this.messages[this.now];
			}
  		}
  	})
	
//百度搜索接口
//	https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow
//  https://www.baidu.com/s?wd=s
})()