仿Google Suggest提示效果
JS文件：
var arrOptions = new Array();var arrOptions1 = new Array();var strLastValue = "";var theTextBox;var currentValue = "";var currentValueSelected = -1;var req;window.onload = function(){var elemSpan = document.createElement("span");elemSpan.id = "spanOutPut";elemSpan.className = "spanTextDropdown";document.body.appendChild(elemSpan);}function GiveOptions(){var intKey = -1;if(window.event){intKey = event.keyCode;theTextBox = event.srcElement;}if(theTextBox.value.length==0){HideTheBox();strLastValue = "";return false;}if(intKey == 13){GrabHighlighted();theTextBox.blur();return false;}else if(intKey == 38){MoveHighlight(-1);return false;}else if(intKey == 40){MoveHighlight(1);return false;}if(theTextBox.value.indexOf(strLastValue)!=0 || arrOptions.length==0 || (strLastValue.length==0&&theTextBox.value.length>0) || (theTextBox.value.length<=strLastValue.length)){strLastValue = theTextBox.value;TypeAhead(theTextBox.value);}else{BuildList(theTextBox.value);}}function TypeAhead(xStrText){var url = "test_002.jsp";if(window.XMLHttpRequest){req = new XMLHttpRequest();}else if(window.ActiveXObject){req = new ActiveXObject("Microsoft.XMLHTTP");}if(req){req.open("GET",url,true);req.onreadystatechange=callback;req.send(null);}}function callback(){if(req.readyState == 4){if(req.status == 200){parseMessage();}else{alert("Not able to retieve description" + req.statusText);}}else{}}function createXml(str){if(document.all){var xmlDom=new ActiveXObject("Microsoft.XMLDOM");xmlDom.loadXML(str);return xmlDom;} else {return new DOMParser().parseFromString(str, "text/xml");}}function parseMessage(){var xmldoc;xmldoc=createXml(req.responseText);var node = xmldoc.getElementsByTagName("info");var node1 = xmldoc.getElementsByTagName("info1");arrOptions = new Array();arrOptions1 = new Array();for(var i=0; i<node.length; i=i+1){arrOptions[i] = node[i].firstChild.nodeValue;arrOptions1[i] = node1[i].firstChild.nodeValue;}BuildList(theTextBox.value);strLastValue = theTextBox.value;}function BuildList(theText){SetElementPosition();var inner = "";var theMathches = MakeMatches(theText);for(var i=0; i<theMathches.length; i=i+1){inner += theMathches[i];}if(theMathches.length>0){document.getElementById("spanOutPut").innerHTML = inner;document.getElementById("OptionsList_0").className = "spanHighElement";currentValueSelected = 0;}else{HideTheBox();}}function SetElementPosition(){var selectedPosX = 0;var selectedPosY = 0;var theElement = document.form1.txtUserInput;var theTextBoxInt = document.form1.txtUserInput;if(!theElement) return;var theElemHeight = theElement.offsetHeight;var theElemWidth = theElement.offsetWidth;while(theElement != null){selectedPosX += theElement.offsetLeft;selectedPosY += theElement.offsetTop;theElement = theElement.offsetParent;}var xPosElement = document.getElementById("spanOutput");xPosElement.style.left = selectedPosX;xPosElement.style.width = theElemWidth;xPosElement.style.top = selectedPosY + theElemHeight;xPosElement.style.display = "block";}var countForId = 0;function MakeMatches(xCompareStr){countForId = 0;var matchArray = new Array();var regExp = new RegExp(xCompareStr,"ig");for(var i=0; i<arrOptions.length; i++){if((arrOptions[i].search(regExp))>-1){matchArray[matchArray.length] = CreateSpanEnd(arrOptions[i],xCompareStr,i);}else{continue;}}return matchArray;}var undeStart = "<span class='spanMatchText'>";var undeEnd = "</span>";var selectSpanStart = "<span style='width:100%;dispaly:block;' class='spanNormalElement' onmouseover='SetHighColor(this)'";var selectSpanEnd = "</span>";function CreateSpanEnd(xStr,xTextMatch,xVal){var selectSpanMid = "onclick='SetText("+ xVal +")'" + "id='OptionsList_" + countForId + "'theArrayNumber='" + xVal + "'>";countForId++;var regExp = new RegExp(xTextMatch,"ig");var start = xStr.search(regExp);var matchedText = xStr.substring(start,start + xTextMatch.length);var Replacestr = xStr.replace(regExp,undeStart+matchedText+undeEnd);return selectSpanStart + selectSpanMid + Replacestr + selectSpanEnd;}function SetHighColor(theTextBox){if(theTextBox){currentValueSelected = theTextBox.id.slice(theTextBox.id.indexOf("_")+1,theTextBox.id.length);}for(var i=0; i<countForId; i=i+1){document.getElementById('OptionsList_'+i).className = 'spanNormalElement';}document.getElementById('OptionsList_'+currentValueSelected).className = 'spanHighElement';}function SetText(xVal){theTextBox = document.form1.txtUserInput;theTextBox.value = arrOptions[xVal];document.form1.txtUserInput1.value = arrOptions1[xVal];document.getElementById("spanOutPut").style.display = "none";currentValueSelected = -1;}function GrabHighlighted(){if(currentValueSelected >=0){xVal = document.getElementById("OptionsList_" + currentValueSelected).getAttribute("theArrayNumber");SetText(xVal);HideTheBox();}}function HideTheBox(){document.getElementById("spanOutPut").style.display = "none";currentValueSelected = -1;}function MoveHighlight(xDir){if(currentValueSelected>=0){newValue=parseInt(currentValueSelected) + parseInt(xDir);if(newValue >-1 && newValue<countForId){currentVlaueSelected = newValue;SetHighColor(null);}}}function ReDraw(){BuildList(document.form1.txtUserInput.value);}?
CSS样式文件：
span.spanTextDropdown{position:absolute;top:0px;left:0Px;width:150px;z-index:101px;background-color:#C0C0C0;border:1px solid #000000;padding-left:2px;overflow:visible;display:none;}span.spanMatchText{text-decoratin:underline;font-weight:bold;}span.spanNormalElement {background:#C0C0C0;}span.spanHighElement{background:!000040;color:white;cursor:pointer;}?
?
jsp文件：
<%@ page contentType="text/html; charset=GBK" language="java" import="com.exp.fcl.syscfg.SystemConfig" errorPage="/framework-resources/exp-error.jsp"%><%@ taglib uri="/WEB-INF/lib/exp-taglib.tld" prefix="exp"%><exp:spage id="" path="ems.test001.listener" /><!--页面与事件监听器类粘合页面--><%@ include file="/WEB-INF/include/BasePage.inc"%><% String contextPath = request.getContextPath(); %><html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"><META HTTP-EQUIV="Pragma" CONTENT="no-cache"><META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"><META HTTP-EQUIV="Expires" CONTENT="0"><title>新增物品</title><link type="text/css" rel="stylesheet" href="<%=contextPath%>/framework/sys-resources/css/textdown.css"><script LANGUAGE="JavaScript" src="<%=contextPath%>/framework/sys-resources/js/textdown.js"></script><jsp:include page="/WEB-INF/include/Resources.jsp"><jsp:param name="resourcelet" value="querypage" /></jsp:include></head> <script type="text/javascript"> function doAction(){ form1.action = "test_001.jsp?actionName=doTest"; form1.submit(); } </script><body id="main_content"><exp:message /><form name="form1" method="post" action=""><input type="hidden" name="backurl" value="<%=this.value("backurl")%>" /><input type="hidden" name="title" value="公司信息"><input type="hidden" name="subtitle" value="日期：<%=(new Date()).toLocaleString()%>"><input type="hidden" name="fields" value="COMPANYID-公司编码|COMPANYNAME-公司名称|CMP_GRADE_LABEL-公司级别|PROVIDER_NAME-供应商|ORDER_NUMBERS-订单号|PROJECT_NAME-工程项目"><table onclick="return showHelp('');"></span></td></tr><tr><td height="25" align="right">物品名称：</td><td width="33%"><input type="text" class='main_Input' name="txtUserInput" id="txtUserInput" value="" style="width:200px" onKeyup="GiveOptions();"> <input type="text" class='main_Input' name="txtUserInput1" id="txtUserInput1" value="" style="width:200px"> <input type="text" name="txtIgnore" style="display:none" /> </td><td width="17%" align="right"></td><td><input type="button" name="a" value = "aaaaa" onClick="doAction()" /></td></tr></table></td></tr></table></form></body></html>?
?
JSP类文件
<%@ page contentType="text/html; charset=GBK"%><%@page import="com.xub.ems.test.Listener.Test001Listener"%><%response.setContentType("text/xml");response.setHeader("Cache-Control", "no-cache");StringBuffer xml = new StringBuffer();xml.append("<?xml version="1.0" encoding="utf-8"?>\n");xml.append("<message>\n");xml.append("<data>\n"); xml.append("<info>" + "one" + "</info>\n"); xml.append("<info1>" + "1" + "</info1>\n"); xml.append("</data>\n"); xml.append("<data>\n"); xml.append("<info>" + "南京华开电气设备有限公司" + "</info>\n"); xml.append("<info1>" + "11" + "</info1>\n"); xml.append("</data>\n");xml.append("</message>");//PrintWriter out = response.getWriter();out.write(xml.toString()); %>?