javascript智能提示框小例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>My JSP 'index.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><script type="text/javascript" src="jquery.js"></script> </head> <body> <div id="opt" style="z-index10; width: 168px;position:absolute;border:1px solid black;display: none" ></div> <input name="inputTest" id='inputTest' size="22" onkeyup="prompt('inputTest',event)" onblur="bodyClick('inputTest',event)"/> </body> <script type="text/javascript"> function prompt(obj,event){var kc = window.event?event.keyCode:event.which;//如果是键盘方向左键或右键则不做任何操作if(kc==37 || kc ==39){return;} var cs = document.getElementById(obj); var opt = document.getElementById("opt"); opt.style.display=""; var left = cs.getBoundingClientRect().left; var scroll = document.body.scrollTop; var top =cs.getBoundingClientRect().top+scroll; opt.style.left=left; opt.style.top = top+23; var kc = event.keyCode; //去空格 var code = cs.value.trim(); var attr; //此处用于模拟从服务端取出xml数据,真实环境下应为通过你输入的内容模糊查询数据库的数据,用ajax实现. var xmlStr = '<?xml version="1.0" encoding="utf-8" ?><results><result code="111" name="aaa"></result><result code="222" name="bbb"></result><result code="333" name="ccc"></result></results>'; var moz = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined');//读XML//如果为IE if (window.ActiveXObject){ var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = false; xmlDoc.loadXML(xmlStr); attr=xmlDoc.getElementsByTagName("result"); } //如果为firefox if(moz){ var xmlDoc = document.implementation.createDocument("", "doc", null); xmlDoc.async = false; domParser = new DOMParser(); xmlDoc = domParser.parseFromString(xmlStr, 'text/xml'); attr=xmlDoc.getElementsByTagName("result"); //alert(attr.length); } //根据从服务端取出的xml数据生成一个提示框table var table ="<table id='valTab' width='100%' cellpadding='0' cellspacing='0' height='100%'>"; for(var i=0;i<attr.length;i++){ table+="<tr style='padding: 0;margin: 0;' onmouseover='tabMouseOver(this)' onmouseout='tabMouseOut(this)' bgcolor='#F0FFFF'>"; table+="<td id='aa"+i+"' style='padding: 0;margin: 0;' width='100%' onclick=tabClick(this,'"+obj+"')>"; table+=attr[i].getAttribute("code")+"："+attr[i].getAttribute("name"); table+='</td></tr>'; } table+="</table>" opt.innerHTML = table; //alert(table); //如果数据为空则显示框不显示 if(attr.length==0){ opt.style.display="none"; } //按钮 38 上 40下 13 回车 if(kc == 40 || kc ==38 || kc ==13){ downOrUp(kc,obj); } else { line = -1; } }var line = -1;function downOrUp(kc,obj){var tabLen = $("#valTab tbody tr").length;if(tabLen==1){document.getElementById('valTab').rows[0].style.backgroundColor ='#6495ED';document.getElementById('valTab').rows[0].style.color ='white';if(kc==13){var selectVal = $("#valTab tbody tr").eq(0).find("td").eq(0).html();var index = selectVal.indexOf('：');var code = selectVal.substring(0,index);document.getElementById(obj).value=code;document.getElementById(obj).focus();bodyClick1();}return; }if(kc == 40){line++;line =(line==tabLen?0:line); $("#valTab tbody tr").eq(line) .css("backgroundColor", "#6495ED") .css("color", "white"); $("#valTab tbody tr").eq(line - 1) .css("backgroundColor", "#F0FFFF") .css("color", "black"); }else if(kc == 38){ line--; line =(line<=-1?tabLen-1:line); $("#valTab tbody tr").eq(line) .css("backgroundColor", "#6495ED") .css("color", "white"); $("#valTab tbody tr").eq(line+1) .css("backgroundColor", "#F0FFFF") .css("color", "black"); } else if(kc == 13){ var selectVal = $("#valTab tbody tr").eq(line).find("td").eq(0).html();var index = selectVal.indexOf('：');var code = selectVal.substring(0,index);var name = selectVal.substring(index+1);document.getElementById(obj).value=code;document.getElementById(obj).focus();bodyClick1();}}function bodyClick1(){ var opt = document.getElementById("opt"); opt.style.display="none"; if($("#valTab")){$("#valTab").remove();line = -1;} } //文本框失去焦点时,执行的方法,用于隐藏提示框.function bodyClick(obj,event){//取得触发当前事件的对象.var el;//IE的情况下if (window.ActiveXObject){el = document.activeElement.id;}else{//firefox等其他情况下 el = event.explicitOriginalTarget.id;} var e = el.substring(0,2); //如果触发此事件的对象为"aa"开头,表示是通过鼠标点击提示框操作,此时,不通过此方法来执行提示框隐藏操作,所有,return false,不做任何操作. if(e=='aa'){ return false; } var opt = document.getElementById("opt"); opt.style.display="none"; if($("#valTab")){$("#valTab").remove();line = -1;} } //鼠标点击提示框某条记录时的操作,把选中的行记录放到文本框中,并隐藏提示框 function tabClick(tdObj,obj){ var value=tdObj.innerHTML; var index = value.indexOf('：'); var code = value.substring(0,index); var name = value.substring(index+1); document.getElementById(obj).value=code; var opt = document.getElementById("opt"); opt.style.display="none"; line =-1; } String.prototype.trim = function(){ return this.replace(/(^\s*)|(\s*$)/g,"");} function tabMouseOver(obj){var len= obj.parentNode.childNodes.length;for(var i=0;i<len;i++){obj.parentNode.childNodes[i].style.backgroundColor="#F0FFFF";obj.parentNode.childNodes[i].style.color = "black";if(obj==obj.parentNode.childNodes[i]){line=i;}}obj.style.backgroundColor="#6495ED";}function tabMouseOut(obj){obj.style.backgroundColor="#F0FFFF";} </script> </html>?附带jquery.js 跟jquery本身自带的一个提示框插件jquery-autocomplete