仿百度搜索框–vue版本

最新推荐文章于 2022-07-11 09:10:37 发布

在下颓废

最新推荐文章于 2022-07-11 09:10:37 发布

阅读量803

点赞数 1

分类专栏：前端文章标签：仿百度搜索

本文链接：https://blog.csdn.net/weixin_40928253/article/details/100530330

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

仿百度搜索框–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>