浏览 8462 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2007-12-25
图片截图显示不正常的话可以转到: http://hi.baidu.com/yidwo/blog/item/3e2b44d4f8b87505a08bb766.html 用java+ajax做的一个类似于google输入栏版提示的ajax小功能. 稍改进了下.现在类似于163.126的邮件地址自动完成功能. 结构描述: 1.前台页面: autoComplete.js autoComplete.jsp 2.配置: 把web.xml文件的内容配置到你web工程的web.xml文件. 3.后台程序及源码: 在com文件夹下. 运行: 在tomcat中打开autoComplete.jsp,键入字符a , y ,g都可以弹出. 要想内容更丰富. 请您自己完善. 在IE和firefox 下测试通过. 演示截图: IE: Firefox: // JavaScript Document var xmlHttp; var completeDiv; var nameTable; var nameTableBody; var inputField; var divIframe; var isDivShow = false; //2007-12-23 var inTbodyLineNO = -1; //2007-12-23 function createXMLHttpRequest(){ if(window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") }else if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); } } function initVars(){ nameTableBody = document.getElementById("name_table_body"); nameTable = document.getElementById("name_table"); completeDiv = document.getElementById("popup"); inputField = document.getElementById("names"); divIframe = document.getElementById("diviframe"); } /* post html 页面 调用接口,此方法异步调用Servlet方法 AutoCompleteServlet */ function findNames(e){ //alert("00000"); initVars(); if(e.keyCode!=40 && e.keyCode!=38 && e.keyCode!=13 && e.keyCode!=27) { if(inputField.value.length > 0) { createXMLHttpRequest(); var url = "/AutoCompleteServlet"; var postPara = "names="+inputField.value; postPara = encodeURI(postPara); postPara = encodeURI(postPara); xmlHttp.open("post",url,true); xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.send(postPara); xmlHttp.onreadystatechange = callback; }else { clearNames(); } } } /* setNames 方法处理返回回来的数据 */ function callback(){ if(xmlHttp.readyState == 4){ // alert("status: "+xmlHttp.status+" text: "+xmlHttp.statusText); if(xmlHttp.status == 200){ setNames(xmlHttp.responseXML.getElementsByTagName("name"),xmlHttp.responseXML.getElementsByTagName("value")); }else{ clearNames(); alert("Exception-status: "+xmlHttp.status+" text: "+xmlHttp.statusText); } } } function setNames(the_names,the_values){ clearNames(); var size = the_names.length; //alert(size); setOffsets(); var row,cell,txtNode; for(var i=0;i<size;i++){ isDivShow = true; var nextNode = "\""+the_names[i].firstChild.data+"\" <"+the_values[i].firstChild.data+">"; row = document.createElement("tr"); cell = document.createElement("td"); cell.onmouseout = function(){this.className='mouseOver';}; cell.onmouseover = function(){this.className='mouseOut';}; cell.setAttribute("bgcolor","#FFFAFA"); cell.setAttribute("border","0"); cell.onclick = function(){populateNames(this);}; divIframe.style.display=""; txtNode = document.createTextNode(nextNode); cell.appendChild(txtNode); row.appendChild(cell); nameTableBody.appendChild(row); if(inTbodyLineNO == -1) { inTbodyLineNO = 0; nameTableBody.rows[inTbodyLineNO].cells[0].className = "mouseOut"; } } } // div 的显示位置设置 function setOffsets(){ var end = inputField.offsetWidth/2; var left = calculateOffsetLeft(inputField); var top = calculateOffsetTop(inputField) + inputField.offsetHeight; completeDiv.style.border = "black 1px solid"; completeDiv.style.left = left + "px"; completeDiv.style.top = top + "px"; nameTable.style.width = end + "px"; divIframe.style.border="none"; } function calculateOffsetLeft(field){ return calculateOffset(field,"offsetLeft"); } function calculateOffsetTop(field){ return calculateOffset(field,"offsetTop"); } function calculateOffset(field,attr){ var offset = 0; while(field){ offset += field[attr]; field = field.offsetParent; } return offset; } // 对用户输入框取值 用户选择时调用 function populateNames(cell){ var oldInputValue = inputField.value.substring(0,inputField.value.lastIndexOf(",")+1); var newInputValue = cell.firstChild.nodeValue; if(oldInputValue.indexOf(newInputValue) > -1) { inputField.value = oldInputValue; }else { inputField.value = oldInputValue + newInputValue+","; } clearNames(); } // 清空操作 function clearNames(){ var ind = nameTableBody.childNodes.length; for(var i = ind - 1; i >= 0; i--){ nameTableBody.removeChild(nameTableBody.childNodes[i]); } divIframe.style.display="none"; completeDiv.style.border = "none"; inTbodyLineNO = -1; //2007-12-23 isDivShow = false; //2007-12-23 } function getKeyCode(oEvent) { /* if(oEvent.keyCode!=40 && oEvent.keyCode!=38 && oEvent.keyCode!=13 && oEvent.keyCode!=27) { //window.setTimeout("findNames()",2000); findNames(); } */ if(isDivShow) // 如果自动完成的层显示出来了 { if(oEvent.keyCode == 40) { MoveCursor(1); }else if(oEvent.keyCode == 38) // { MoveCursor(-1); }else if(oEvent.keyCode == 13) // enter { selectValue(); // oEvent.keyCode=9; }else if(oEvent.keyCode == 27) // esc { clearNames(); } } } //2007-12-23 function MoveCursor(nFlag) { var lineNum = nameTableBody.rows.length; //alert(lineNum); nameTableBody.rows[inTbodyLineNO].cells[0].className = "mouseOver"; inTbodyLineNO = (inTbodyLineNO + nFlag + lineNum) % lineNum; nameTableBody.rows[inTbodyLineNO].cells[0].className = "mouseOut"; nameTableBody.rows[inTbodyLineNO].cells[0].scrollIntoView(true); } //2007-12-23 function selectValue() { if(inTbodyLineNO == -1) { return; }else { populateNames(nameTableBody.rows[inTbodyLineNO].cells[0]); } } 代码内有详细的注释.在这里就不详述. 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |