ajax實現百度下拉框
阿新 • • 發佈：2019-02-10
使用Ajax實現此效果
1.準備資料的serlvet
2.建立select.jsp使用Ajax完成區域性重新整理實現效果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); } }
<%@ 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 onmouseover='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="" onkeyup="getData(event);"/> <input type="button" value="百度一下" /> </div> <div id="div01" style="display: none"></div> </body> </html>
實現的效果如下：
