jQuery实现百度搜索框

忘是亡心i 2022-05-18 10:40 278阅读 0赞

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

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

实现效果![70][]

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

代码部分

## **html部分：** ##

## **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>
    		
    			<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>
    	
    	<script src="js/jquery-3.3.1.js"></script>
    	
    	<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>

[70]: /images/20220518/f2da2ddf69994c659e9a75a107c2218c.png