技术教程 模拟实现百度搜索框 正文

模拟实现百度搜索框

2022-07-27,

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title>海量点</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<style>
			*{margin: 0;padding: 0;}
		li{
			list-style: none;
			line-height: 30px;
		}
		.wrap{
			width: 100%;
			display: flex;
			justify-content: center;
		}
		.wrap .box{
			display: flex;
			margin-top: 40px;
			align-items: center;
		}
		.inputBox{
			position: relative;
		}
		.ulBox{
			width:calc(100% - 42px);
			/* width: 460px; */
			position: absolute;
			border: 2px solid #4e6ef2;
			border-top: 0;
			/* padding-left: 20px; */
			border-radius: 0 0 10px 10px;
			padding: 20px;
		}

		.ulBox li:hover{
			color: #4e6ef2;
			cursor: pointer;
		}
		
		.wrap .box .inputBox input{
			margin: 0;
			/* width: 480px; */
			border: none;
			height: 36px;
			border: 2px solid #c4c7ce;
			border-radius: 10px 0 0 10px;
			border-right: 0;
			overflow: visible;
			padding-left: 20px;
		}
		.wrap .box .inputBox input:focus {
			outline:none;
			border: 2px solid #4e6ef2;
			border-right: 0;
		}
		.wrap .box .inputBox .iptClass{
			border-radius: 10px 0 0 0;
		}
		
		.wrap .searchBtn{
			    cursor: pointer;
			    width: 112px;
			    height: 40px;
			    line-height: 41px;
			    line-height: 40px\9;
			    background-color: #4e6ef2;
			    border-radius: 0 10px 10px 0;
			    font-size: 17px;
			    box-shadow: none;
			    font-weight: 400;
			    border: 0;
			    outline: 0;
			    letter-spacing: normal;
				text-align: center;
				color: #fff;
		}
		
    </style>
	</head>
	<body>
		<div id="app">
			<div class="wrap">
				<div class="box">
					<div class="inputBox">
						<input type="text" :class="{iptClass:isShow}" v-model="val" placeholder="请输入搜索" @input="inputEvents($event)"
						 autofocus="autofocus" @keyup.enter="enterEvent" @blur.prevent="changeCount()" />
						<ul class="ulBox" v-show="isShow">
							<li v-for="(item,index) in arr" :key="item.sa" @click="tapLi(item.q)">
								{{item.q}}
							</li>
						</ul>
					</div>
					<div class="searchBtn" @click="tap">
						搜索一下
					</div>
				</div>

			</div>

		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				isShow: false, //是否展示下拉菜单
				val: "",
				arr: [],
				msg: "22"

			},
			methods: {
				//输入事件
				inputEvents() {
					var that = this;
					//清空
					if (!that.val.trim()) {
						that.isShow = false;
						that.arr = [];
					}
					$.ajax({
						type: "get",
						url: `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&&wd=${this.val}`,
						dataType: "jsonp",
						success: function(data) {
							if (data.g) {
								that.isShow = true;
								that.arr = [...data.g];
								// console.log(that.arr)
							}
						}
					});
				},

				//查询
				tap() {
					if (!this.val.trim()) {
						alert("请输入搜索值");
						this.val = ""
						return false
					}
					window.open(
						`https://www.baidu.com/s?ie=utf-8&csq=1&pstg=20&mod=2&isbd=1&cqid=9d64b85900019797&istc=305&ver=0AttG210Peraje7amqHNye9Z20Z5ZC7VDIW&chk=5fbf7ccc&isid=a8c56ebf00060049&ie=utf-8&f=8&rsv_bp=1&rsv_idx=2&tn=baiduhome_pg&wd=${this.val}`,
						"_blank");
					this.val = ""
				},

				//enter触发
				enterEvent() {
					window.open(
						`https://www.baidu.com/s?ie=utf-8&csq=1&pstg=20&mod=2&isbd=1&cqid=9d64b85900019797&istc=305&ver=0AttG210Peraje7amqHNye9Z20Z5ZC7VDIW&chk=5fbf7ccc&isid=a8c56ebf00060049&ie=utf-8&f=8&rsv_bp=1&rsv_idx=2&tn=baiduhome_pg&wd=${this.val}`,
						"_blank");
					this.val = ""
				},

				//失去焦点
				changeCount() {
					setTimeout(() => {
						this.isShow = false;
					}, 300)
				},

				//点击菜单搜索
				tapLi(val) {
					window.open(
						`https://www.baidu.com/s?ie=utf-8&csq=1&pstg=20&mod=2&isbd=1&cqid=9d64b85900019797&istc=305&ver=0AttG210Peraje7amqHNye9Z20Z5ZC7VDIW&chk=5fbf7ccc&isid=a8c56ebf00060049&ie=utf-8&f=8&rsv_bp=1&rsv_idx=2&tn=baiduhome_pg&wd=${val}`,
						"_blank");
					this.val = ""
				}
			}
		})
	</script>
</html>

本文地址：https://blog.csdn.net/qq_43069664/article/details/110224256

《模拟实现百度搜索框.doc》

下载本文的Word格式文档，以方便收藏与打印。

Copyright 2023. 昆居客 - IT编程,互联网信息技术文档大全!