Servlet+Ajax实现搜索框智能提示代码
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <html> <head> <style type="text/css"> #mydiv{ position: absolute; left:50%; top:50%; margin-left: -200px; margin-top: -50ps; } .mouseOver{ background: #708090; color:#FFFAFA; } .mouseOut{ background: #FFFAFA; color:#000000; } </style> <script type="text/javascript"> var xmlHttp; //获取用户输入内容的关联信息的函数 function getMoreContents(){ //首先获取用户的输入 var content=document.getElementById("keyword"); if(content.value==""){ clearContent(); return; } //alert(content.value); //然后要给服务器发送用户输入的内容,因为采用的是ajax异步发送数据,所以要使用一个对象,XmlHttp对象 //xmlHttp=获得xmlHttp对象; xmlHttp=createXMLHttp(); //alert(xmlHttp);-- Object XMLHttpRequest对象 //要给服务器发送数据 var url="search?keyword="+escape(content.value); //true(异步)表示js脚本会在send()方法之后继续执行,而不会等待来自服务器的响应--客户端发送数据给服务器 xmlHttp.open("get", url, true); //xmlHttp绑定回调方法,这个回调方法会在xmlHttp状态改变的时候被调用,0-4状态,4状态表示交互完成 //当完成之后,再调用回调方法才有意义 callback函数处理后台返回给前台的数据 xmlHttp.onreadystatechange=callback; xmlHttp.send(null); } //获得XmlHttp对象 function createXMLHttp(){ //对于大多数的浏览器都适用 var xmlHttp; if(window.XMLHttpRequest){ xmlHttp=new XMLHttpRequest(); } //需要考虑浏览器的兼容性 if(window.ActiveXObject){ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); if(!xmlHttp){ xmlHttp==new ActiveXObject("Msxml2.XMLHTTP"); } } return xmlHttp; } //回调函数 function callback(){ //4代表完成 if(xmlHttp.readyState==4){ //200代表服务器响应成功,404代表路径错误资源未找到,500代表服务器内部错误 if(xmlHttp.status==200){ //交互成功,获得相应的数据,是文本格式 var result=xmlHttp.responseText; //客户端获得json格式的数据--解析获得的数据 java的json和js的json有点小区别 var json=eval("("+result+")"); //获得数据之后,就可以动态的显示这些数据了,把这些数据显示到输入框的下面 //alert(json); //ajax,ajax post,james setContent(json); } } } //设置关联数据的展示,参数代表的是服务器传递过来的关联数据,contents就是json传过来的解析过的result数据 function setContent(contents){ clearContent(); setLocation(); //首先获得关联数据的长度,以此来确定生成多少tr var size=contents.length; //设置内容 for(var i=0;i<size;i++){ var nextNode=contents[i];//代表的是json数据的第i个元素 var tr=document.createElement("tr"); var td=document.createElement("td"); td.setAttribute("border", "0"); td.setAttribute("bgcolor", "#FFFAFA"); //创建一个文本节点 var text=document.createTextNode(nextNode); td.appendChild(text); tr.appendChild(td); document.getElementById("content_table_body").appendChild(tr); //鼠标移入绑定的"mouseOver"样式,鼠标移出绑定"mouseOut"样式 td.onmouseover=function(){ this.className='mouseOver'; } td.onmouseout=function(){ this.className='mouseOut'; } td.onmousedown=function(){ //这个方法实现当鼠标点击一个关联的数据时,关联数据自动设置为输入框的数据 document.getElementById("keyword").value=this.innerHTML; } } } //清空之前的数据 function clearContent(){ var contentTableBody=document.getElementById("content_table_body"); var size=contentTableBody.childNodes.length; for(var i=size-1;i>=0;i--){ contentTableBody.removeChild(contentTableBody.childNodes[i]); } //清除关联数据的外边框 var popDiv=document.getElementById("popDiv").style.border="none"; } //当输入框失去焦点的时候关联信息清空 function keywordBlur(){ clearContent(); } //设置显示关联信息的位置 function setLocation(){ //关联信息显示的位置要和输入框长度一致 var content=document.getElementById("keyword"); var width=content.offsetWidth;//输入框的宽度 var left=content["offsetLeft"];//到左边框的距离 var top=content["offsetTop"]+content.offsetHeight;//到顶部的距离 //获得显示数据的div var popDiv=document.getElementById("popDiv"); popDiv.style.border="gray 1px solid"; popDiv.style.left=left+"px"; popDiv.style.top=top+"px"; popDiv.style.width=width+"px"; document.getElementById("content_table").style.width=width+"px"; }
标注:不是原著,忘记出处了,学习用。。。