最近项目需求，写了一个类似百度搜索框的功能。

把代码整理了一遍，然后分享出来给大家看看，如果有不对的地方请多指教。

实现效果

jquery清除搜索高亮 jquery实现搜索功能_jquery清除搜索高亮

使用的语言：html，css,JavaScript,jQuery

代码部分

html部分：

<div style="color: #323232; ">
		查找：
				<input id="input"/>
				<button>搜索</button>	
				<!--输入框下方的列表-->
				<ul id="ul" style="display:none;z-index: 2;">
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>
				<!--输入框内的箭头-->
				<span id="jiantou" style="padding:10px 20px 10px 20px;margin-left: -200px; background-image: url();background-repeat: no-repeat; background-position: center;"></span>
			</div>

js部分：

$(document).ready(function(){
//					先监听input的值变化			
				document.getElementById("input").oninput=function(){
					var val = $(this).val()
					if(val!=""){
						//当input中有值 的时候显示ul列表
						$("#ul").css("display","block")
					var a = -1 //设置一个变量 用来控制键盘上下键选中的li标签
						//开始监听键盘事件
						document.onkeydown = function (e) {
							       e = e || window.event;	
							      var code = e.keyCode  //用来储存 e.keycode
								  if(code==40){	
								  	console.log("下")
						
										//获取ul中的li个数，使选择不会超出
										if(a<$("#ul").children("li").length){
						a++;
											//开始获取到选择中的li标签
								  	$("#ul").children("li").eq(a)
										}
							}else if(code==38){
									console.log("上")
						
										//获取ul中的li个数，使选择不会超出
										if(0<a){
						a--;			//开始获取到选择中的li标签
								  	$("#ul").children("li").eq(a)
										}
							}else if(code==13){
									console.log("回车")
							}
						}	
					}else{
						//当input中没有值的时候隐藏ul列表
						$("#ul").css("display","none")
					}
				}
				//给body添加一个点击事件来隐藏ul，使用户点击页面ul可以隐藏，不用input失去焦点是因为在选择li的时候很容易出bug
				$("body").click(function(){
					$("#ul").css("display","none")
				})
				
				//好啦最后别忘了失去键盘焦点的时候要把键盘监听事件关闭，不然很容易出BUG
				$("#input").blur(function(){
					document.onkeydown =null
				})
			})

全部代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery实现百度搜索输入框</title>
	</head>
	<body>
		<!--
        	作者：380012546@qq.com
        	时间：2018-08-02
        	描述：实现百度搜索输入框的功能 
        -->
			<div style="color: #323232; ">
		查找：
				<input id="input"/>
				<button>搜索</button>	
				<!--输入框下方的列表-->
				<ul id="ul" style="display:none;z-index: 2;">
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>
				<!--输入框内的箭头-->
				<span id="jiantou" style="padding:10px 20px 10px 20px;margin-left: -200px; background-image: url();background-repeat: no-repeat; background-position: center;"></span>
			</div>
			
	
	</body>
	<!--引入jQuery方便遍历-->
	<script src="js/jquery-3.3.1.js"></script>
	<!--开始js-->
	<script>
		
			$(document).ready(function(){
//					先监听input的值变化			
				document.getElementById("input").oninput=function(){
					var val = $(this).val()
					if(val!=""){
						//当input中有值 的时候显示ul列表
						$("#ul").css("display","block")
					var a = -1 //设置一个变量 用来控制键盘上下键选中的li标签
						//开始监听键盘事件
						document.onkeydown = function (e) {
							       e = e || window.event;	
							      var code = e.keyCode  //用来储存 e.keycode
								  if(code==40){	
								  	console.log("下")
						
										//获取ul中的li个数，使选择不会超出
										if(a<$("#ul").children("li").length){
						a++;
											//开始获取到选择中的li标签
								  	$("#ul").children("li").eq(a)
										}
							}else if(code==38){
									console.log("上")
						
										//获取ul中的li个数，使选择不会超出
										if(0<a){
						a--;			//开始获取到选择中的li标签
								  	$("#ul").children("li").eq(a)
										}
							}else if(code==13){
									console.log("回车")
							}
						}	
					}else{
						//当input中没有值的时候隐藏ul列表
						$("#ul").css("display","none")
					}
				}
				//给body添加一个点击事件来隐藏ul，使用户点击页面ul可以隐藏，不用input失去焦点是因为在选择li的时候很容易出bug
				$("body").click(function(){
					$("#ul").css("display","none")
				})
				
				//好啦最后别忘了失去键盘焦点的时候要把键盘监听事件关闭，不然很容易出BUG
				$("#input").blur(function(){
					document.onkeydown =null
				})
			})
		
	</script>
</html>