简单实现搜索框即时搜索

最新推荐文章于 2024-04-11 18:04:55 发布

wonderful_low_bee

最新推荐文章于 2024-04-11 18:04:55 发布

阅读量1.5k

点赞数

分类专栏： web开发技术点文章标签：即时搜索实时显示提示输入搜索框输入框

本文链接：https://blog.csdn.net/wonderful_low_bee/article/details/78565065

版权

web开发技术点专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jsp部分

<%@ page language="java" contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<script type="text/javascript" src="js/jquery.min.js"></script>  
<script type="text/javascript" src="js/index.js"></script>  
 
<title>自动完成搜索</title>  
</head>  
<body>  
    <form name="form1">  
        <input type="text" id="keyword" style="width:300px;" οnkeyup="test(this.value,event)"><br/>  
        <select multiple="multiple" id="sel" οnchange="test2()" οnblur="missSelect()" 
            style="width:300px;display:none">  
        </select>  
    </form>  
</body>  
</html>

js部分

function test(keyword,event){  
    if (keyword!='' && keyword!=null) {
    	 //定义全局变量  
        var keyword = $("#keyword").val();  
        var sel = document.getElementById("sel");  
        $.post(       
                "serachServlet",//url  
                "keyword="+ keyword,//发送的数据  
                function(data){//获取响应回来的数据  
                	console.log(data);
                    document.getElementById("sel").innerHTML="";  
                    if (data.indexOf("#")>0) {//判断响应回来的数据是否为单个 若为单个无需拆分
                    	var arr = new Array;  
                        var arr = data.split("#");//将响应回来的数据按#拆分成数组           
                          
                        for(var i=0;i<arr.length;i++){//循环每一个满足条件的记录  
                            //将当前循环满足条件的商品名称生成一个下拉的选项  
                            sel.options[i]=new Option(arr[i],i);  
                        }  
    				}else{
    					sel.options[0]=new Option(data,0);  
    				}
                    
                    //判断是否有满足条件的商品  
                    if(data.length>0){  
                        sel.style.display='block';  //如果有，下拉框为可点击状态
                    }else{  
                        sel.style.display='none';  //没有，下拉框为不可点击状态
                    }  
                    //当用户按下上下键时获取相应的值  
                    if(event.keyCode==40){  
                        sel.focus();  
                    }     
                },  
                //发送数据类型  
                "text"  
        );  
	}
} 


function missSelect(){//选择完内容后，下拉框失去焦点，将其改为不可点击状态，下拉框消失
	var sel = document.getElementById("sel");
	sel.style.display='none';
} 


 function test2(){  
    //输入回车，获取输入框内容焦点  
    $("#sel").keypress(function(){  
            $("#keyword").focus();  
            $("#sel").css("display","none");  
    });  
     //双击，获取输入框内容焦点  
     $("#sel").dblclick(function(){  
         $("#keyword").focus();  
         $("#sel").css("display","none");  
     });  
     //将选中的下拉列表中的内容添加到输入框中  
    $("#keyword").val($("option:selected").html());  
}

servlet部分

@WebServlet("/serachServlet")
public class SearchServlet extends HttpServlet {
	private IInterviewService interviewService = new InterviewServiceImpl();

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// ajax处理页面禁用缓存，因为如果数据库在你第一次查询后更新的你需要的数据，当你第二次查询同样的内容时会在页面缓存中取数据，而不是数据库中已经更新的数据，此时并不是你理想的数据。
		resp.setHeader("Content-type", "text/html;charset=utf-8");
		resp.setHeader("expirs", "mon,26jul199705:00:00gmt");
		resp.setHeader("cache", "no-cache,must-revalidate");
		resp.setHeader("pragma", "no-cache");
		// 是设置字符集
		req.setCharacterEncoding("utf-8");
		PrintWriter out = resp.getWriter();
		// 获取传值，搜索商品名称的关键字
		String keyword = req.getParameter("keyword");
		// 查询
		String search = interviewService.searchMessage(keyword);
		
		// search = "123#123#12";
		out.print(search);
	}
}

剩下的dao层就是根据所传的keyword进行模糊查询，查询结果拼接到字符串中用“#”间隔，将字符串返回到Servlet中并输出到页面，
在这就不多说明了，
有不懂的或更好方法的，欢迎评论。