jquery输入搜索下拉 jquery搜索框

转载

mob64ca140f67e3 2023-11-03 10:28:41

文章标签 jquery输入搜索下拉前端仿百度搜索 html 百度 文章分类 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 = $('<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>