仿百度搜索框–jQuery版本

仿百度搜索框–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 = $('
  • ' + res.s[i] + '
  • '
    ); 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>

    结果展示

    仿百度搜索框–jQuery版本_第1张图片仿百度搜索框–jQuery版本_第2张图片

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

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

    源码下载地址(Vue版本和jQuery版本)

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

    你可能感兴趣的:(前端)