<!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