仿百度搜索框–jQuery版本

最新推荐文章于 2023-07-24 12:36:25 发布

在下颓废

最新推荐文章于 2023-07-24 12:36:25 发布

阅读量1.4k

点赞数 1

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

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

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

仿百度搜索框–jQuery版本

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

正题

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery实现百度搜索输入框</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" />
		<style>
			.searchdiv{
				text-align:center;
			}
			.searchdiv->input{
				padding: 10px 15px;
			}
			searchul,li{
                list-style: none;
                margin: 0;
            }
			searchul.li{
                line-height:30px;
                font-size:16px;
                padding:5px 10px;
            }
            searchul.li.current{
                background:#CCCCCC;
                color:#0000FF;
                cursor: pointer;
            }
           li:hover{
                background:#CCCCCC;
                color:#0000FF;
                cursor: pointer;
            }
		</style>
	</head>
	<body>
		<div style="color: #323232;" class="searchdiv">
			查找：
			<input type="text" id="searchtxt" />
			<input type="button" id="searchbtn" value="百度一下" />
			<div class="box" id="searchbox">
				<ul class="searchul">

				</ul>
			</div>
		</div>


	</body>
	<!--引入jQuery方便遍历-->
	<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
	<!--开始js-->
	<script>
		//要仿百度当然要知道百度的搜索接口
		//整理以后的接口https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&cb=
		//这部分是根据输入框中的事件来做的事情
		//应该使用keyup来判断是否要发送请求，如果使用keydown会发现输入一个词后要再按一下键盘才能发送请求获取数据，使用keyup在输入完词以后就会立即发送请求
		var now = -1; //声明一个变量值为-1，是为了在使用上下键的时候记录li的序号
		var resLength = 0; //这个变量是为了存li的长度
		$('#searchtxt').keyup(function(event) {
			if (event.keyCode == 38 || event.keyCode == 40) { //每按一次上下键都会发送一次请求，所以要先
				return; //清除一边请求
			};
			console.log(event.which)
			var dat = {
				wd: $('#searchtxt').val()
			};
			if ($('#searchtxt').val() != '') { //当输入框的值不为空的时候才能发送请求
				$.ajax({
					type: "get",
					url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
					async: true,
					data: dat,
					dataType: 'jsonp', //已经跨域了
					jsonp: 'cb', //百度的回调函数
					success: function(res) {
						for (var i = 0; i < res.s.length; i++) {
							resLength = res.s.length;
							oli_i = $('<li>' + res.s[i] + '</li>');
							console.log(oli_i)
							$('#searchbox ul').append(oli_i);
							//要实现点击某一条词的时候也能让输入框中出现点击的这条词，所以要在success里面设置
							$('#searchbox ul li').eq(i).click(function() {
								$('#searchtxt').val($(this).text());
								$(this).addClass('current').siblings().removeClass('current')
							})
						};

					},
					error: function(res) {
						console.log(res)
					}
				});
			} else {
				$('#searchbox ul').html('') 
			};
		});

		//在输入框中按上下键的时候对应的每一条数据的样式要有改变，这里使用了keydown这个事件足够了
		$('#searchtxt').keydown(function(ev) {
			if (ev.keyCode == 40) { //按下键时，now应该变大
				now++;
				$('#searchbox ul li').eq(now).addClass('current').siblings().removeClass('current')
				$('#searchtxt').val($('#searchbox ul li').eq(now).text())
				//resLength表示的是长度，now表示的是序号，所以要用resLength-1
				if (now == resLength - 1) {
					now = -1; //当选择的数据已经到了最底部的时候，就要从顶部开始重新循环，所以now又回到-1
				}
			};
			if (ev.keyCode == 38) {
				now--; //按上键的时候，光标往上走，所以now减小  
				$('#searchbox ul li').eq(now).addClass('current').siblings().removeClass('current');
				$('#searchtxt').val($('#searchbox ul li').eq(now).text())
				if (now < -1) {
					now = resLength - 1 //当光标走到最上面的时候，再循环到底部重新往上走
				};

			};
			if (ev.keyCode == 13) { //当按下回车的时候，应该开始查询具体的结果了，所以这里用的是百度查询的接口
				window.open('https://www.baidu.com/s?wd=' + $('#searchtxt').val())
				$('#searchtxt').val('');
				$('#searchbox ul').html('')
			}
		})


		//点击百度一下这个按钮的时候也要实现跳转页面
		$('#searchbtn').click(function() {
			if ($('#searchtxt').val() != '') {
				window.location.href = 'https://www.baidu.com/s?wd=' + $('#searchtxt').val()
				$('#searchtxt').val('');
				$('#searchbox ul').html('')
			};

		})
	</script>
</html>

结果展示

在这里插入图片描述

从2张图的对比来看，百度搜索框大致功能已经实现，但是依然存在问题。在实际网页中，为了美观，自动补全的结果不应该展示这么多，应该对结果进行排序，显示固定的数目。然而这一点，需要结合开发环境具体处理。

贴出来的代码中已经给出了实现的过程，粘贴到Hbuilder中就能运行出结果。在下一篇文章中将给出vue版本的实现。

源码下载地址（Vue版本和jQuery版本）

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

在下颓废

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
仿百度搜索框–jQuery版本

仿百度搜索框–jQuery版本时维九月，序属三秋。此吾工作三个月之日，亦是吾重拾博客之时。一路坎坷走来，经历良多，收获甚多。正题百度搜索框是企业开发中常用的一项功能，作为一个前端工作者，自然也是必不可少的。这篇博客中主要介绍jQuery版本的实现。<!DOCTYPE html><html> <head> <meta charset="UTF...
复制链接

扫一扫