ajax实现百度下拉框

使用Ajax实现此效果

1.准备数据的serlvet

public class SelectServlet extends HttpServlet {

	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		//设置请求编码格式
		//设置响应编码格式
		//获取请求信息
			String val=req.getParameter("val");
			System.out.println(val);
		//处理请求信息
			//创建原始数据池
			String[] str={"abc","application","ajax","body","back","beijing","client","color","copy"};
			//创建list存储,符合要求的数据
			ArrayList<String> list=new ArrayList<String>();
			//遍历数据池,找出符合要求的数据
			for(int i=0;i<str.length;i++){
				if(str[i].startsWith(val)){
					list.add(str[i]);		
				}		
			}	
			System.out.println(list);
		//开始响应  "['a','b','c']"
			String s="[";
			for(int i=0;i<list.size();i++){
					s=s+"'"+list.get(i)+"',";
			}
			s=s+"]";
			System.out.println(s);
			resp.getWriter().write(s);
	}
}
2.创建select.jsp使用Ajax完成局部刷新实现效果

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <style type="text/css">
    	#showdiv{
    		width:500px;
    		margin:0px auto;
    		margin-top:200px;
    	}
    	#search{
    		width:350px;
    		height:30px;
    	}
    	body{
    		background-color:gray;
    	   background:url(img/background.jpg);
    	}
    	input[type=button]{
    		border:none;
    		height: 29px;
    		width:80px;
    	}
    	input[type=button]:HOVER{
    		color:red;
    	}
    	#div01{
    		width:350px;
    		border:solid 1px;
    		border-top:none;
    		background-color: white;
    		margin-left: 425px;
    	}
    </style>
    <!-- 使用ajax技术实现下拉框提示效果 -->
    <script type="text/javascript">
    		//定义计数器
    		var count=-1;
    		//创建变量记录setTimeout的id值
    		var id;
    		function getData(event){
    			//获取evet对象来获取用户下压的键盘值
    			var eve=window.event || event;
    			var code=eve.keyCode;
    			//获取用户查询数据信息
    			var val=document.getElementById("search").value;
    			//获取ajax引擎对象
    			var ajax;
    			//获取不同版本的ajax引擎
    			if(window.XMLHttpRequest){
    				ajax=new XMLHttpRequest();
    			}else if(window.ActiveXObject){
    				ajax=new ActiveXObject("Msxml2.XMLHTTP");		
    			}
    			//复写onreadystatuechange
    			ajax.onreadystatechange=function(){
    				if(ajax.readyState==4){
    					if(ajax.status==200){
    						//获取响应结果
    						var result=ajax.responseText;
    						//使用eval将结果转换为可执行的js代码
    						eval("var data="+result);
    						//获取div01对象
    						var div=document.getElementById("div01");
    						//清空div数据
    						div.innerHTML="";
    						//遍历data数组
    						for(var i=0;i<data.length;i++){
    							div.innerHTML=div.innerHTML+"<div οnmοuseοver='testMouse(this)'>"+data[i]+"</div>";	
    						}
    						//将隐藏的div显示
    						div.style.display="";
    					}
    				}		
    			}
    			//获取所有填充好的元素对象集合
    			var div=document.getElementById("div01");
    			var divChild=div.childNodes;    			
    			//判断是否是向下的键,实现键盘联动
    			if(code == 40){
    				//遍历divChild清空背景色
    				for(var i=0;i<divChild.length;i++){
    					divChild[i].style.backgroundColor="";
    				}
    				count=count<divChild.length-1?++count:0;
    				divChild[count].style.backgroundColor="red";
    				document.getElementById("search").value=divChild[count].innerHTML;
    			}
    			if(code == 38){
    				//遍历divChild清空背景色
    				for(var i=0;i<divChild.length;i++){
    					divChild[i].style.backgroundColor="";
    				}
    				count=count>0?--count:divChild.length-1;
    				divChild[count].style.backgroundColor="red";
    				document.getElementById("search").value=divChild[count].innerHTML;
    			}
    			//请求
				if(code!=40 && code!=38){
					if(val!=""&&val!=null){
							window.clearTimeout(id);
						    id=window.setTimeout(function(){
							//创建并发送请求
		        			ajax.open("get","sel.action?val="+val);
		        			ajax.send(null);		
						},500);
	    				
	    			}else{
	    				//将div清空并隐藏
	    				var div=document.getElementById("div01");
	    				div.innerHTML="";
	    				div.style.display="none";	
	    			}	
				}  				
    		}
    		//鼠标悬停效果实现
    		function testMouse(dd){
    			//获取dd的父div元素对象
    			var pdiv=dd.parentNode;
    			//获取所有的子div对象集合
    			var cdiv=pdiv.childNodes;
    			//清空所有的div背景样式
    			for(var i=0;i<cdiv.length;i++){
    				cdiv[i].style.backgroundColor="";
    				if(cdiv[i]==dd){
    					count=i;
    				}
    			}
    			//改变鼠标悬停的元素背景色
    			dd.style.backgroundColor="red";   			
    		}		
 </script>
 </head>
 <body>
    	<div id="showdiv">
    		<input type="text" name="search" id="search" value="" οnkeyup="getData(event);"/>
    		<input type="button" value="百度一下" />
    	</div>
    	<div id="div01" style="display: none"></div>
  </body>
</html>

实现的效果如下:






已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页