仿百度搜索框–vue版本

仿百度搜索框–vue版本

时维九月,序属三秋。此吾工作三个月之日,亦是吾重拾博客之时。一路坎坷走来,经历良多,收获甚多。

正题

百度搜索框是企业开发中常用的一项功能,作为一个前端工作者,自然也是必不可少的。在上一篇中介绍了jQuery版本的 ,这篇博客中主要介绍vue版本的实现。

<!DOCTYPE html>
<html lang="zh">
	<head>
		<title>search_baidu</title>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		</head> <body>
		<style>
			.container{
				padding: 10px 15px;
		
				text-align:center;
			}	
			.form-control{
				 padding: 10px 15px;
				 	width: 280px;
			}
			.list-group{
				position: absolute;
				text-align: initial;
				margin-left: 684px;
			}
	
			.list-group-item:first-child {
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;
				width: 300px;
			}
			.list-group-item-text{
				margin-bottom: 0;
				line-height: 1.3;
			}
			.list-group-item{
				display: block;
				width: 300px;
				padding: 10px 15px;
				margin-bottom: -1px;
				background-color: #fff;
				border: 1px solid #ddd;
			}
		
		</style>
		<div class="container" id="app">
			<form action="">
				<div class=" form-group">
					<input v-model="wd" @keyup="keyup($event)" @keydown="keydown($event)" type="text" class="form-control" />
					<button type="button" style=" padding: 10px 15px;" @click="clickStart($event)">开始搜素</button>
					<ul class="list-group">
						<li class="list-group-item list-group-item-text" v-for="(item,index) in arr" :class="{'list-group-item-info':index==listIndex}"
							 @click="click($event)">
							 <td  id="keyWord">{{item}} </td>
						 </li>
					</ul>
				</div>
			</form>
		</div>
		</body>
	
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<!-- 		<script src="http://code.jquery.com/jquery-1.12.4.min.js"</script> -->
	
		<script>
			new Vue({
				el: "#app",
				data: {
					wd: '', //搜索的关键词
					arr: [], //用于储存关键词的搜索词条
					listIndex: -1 //设置初始索引,数组从0开始,因此初始成-1
				},
				methods: {
					//这个函数我们在input标签输入关键词的时候不断的给百度服务器发送请求获取搜索词条,并且不断的复制给data中的数组arr
					keyup(event) {
						//如果我按的是上下键,那么就不发送请求了
						console.log(event);
						if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13) return;
						var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su"
						this.$http.jsonp(url, {
							params: {
								wd: this.wd
							},
							jsonp: 'cb'
						}).then(res => {
							// console.log(res);
							this.arr = res.data.s; //把百度服务器返回的数据传给arr数组
						})
					},
					
					//监听鼠标的点击事件
					//如果鼠标点击某一行的文字,则点击事件中的event.target.data代表关键词
					//如果点击某一行的空白处,则点击事件中的event.target.innerText代表关键词
					//大家可以通过console.log(event)来查看关键词所在的位置
					click(event) {
						// console.log(event);
						if (event.target.data != undefined) {
							this.wd = event.target.data;
							window.open("https://www.baidu.com/s?wd=" + this.wd);
						} else if (event.target.innerText != undefined) {
							this.wd = event.target.innerText;
							window.open("https://www.baidu.com/s?wd=" + this.wd);
						}
					},
					clickStart(event) {
						// console.log(event);
						// var word = $("#keyWord").innerText();
						// console.log(word)
						if (event.target.data != undefined) {
							this.wd = event.target.data;
							window.open("https://www.baidu.com/s?wd=" + this.wd);
						} else if (event.target.innerText != undefined) {
							
							this.wd = event.target.innerText;
							window.open("https://www.baidu.com/s?wd=" + this.wd);
						}
					},
					//监听键盘的事件
					//如果按down,则增加当前listIndex+1,因此arr[this.listIndex]就能代表当前的词条
					//我们通过对listIndex的修改来得到当前词条在arr中的索引,然后就可以得到词条的具体信息,然后发送请求了
					keydown(event) {
						// console.log(event);
						//下键:40 上键:38
						if (event.keyCode == 38) {
							//按的上键
							this.listIndex--;
							if (this.listIndex < 0) {
								this.listIndex = this.arr.length - 1;
							}
							this.wd = this.arr[this.listIndex];
						} else if (event.keyCode == 40) {
							//说明你按的是下键
							this.listIndex++;
							if (this.listIndex > this.arr.length - 1) {
								this.listIndex = 0;
							}
							this.wd = this.arr[this.listIndex];
						} else if (event.keyCode == 13) {
							//如果你按的是enter,那么就跳转到百度搜索结果
							window.open("https://www.baidu.com/s?wd=" + this.wd);
						}

					}
				}
			});
		</script>
</html>

结果展示

在这里插入图片描述在这里插入图片描述

从2张图的对比来看,百度搜索框大致功能已经实现,但是依然存在问题。网页的格式还需要调整。
贴出来的代码中已经给出了实现的过程,粘贴到Hbuilder中就能运行出结果。可以看出来,jQuery版本和vue版本的大致实现过程是一样的,只是语法不同而已,至于选择那一种,看个人爱好了。
源码下载地址(Vue版本和jQuery版本)

https://download.csdn.net/download/weixin_40928253/11662983

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值