仿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' οnmοuseοver='SetHighColor(this)'";
var selectSpanEnd = "</span>";
function CreateSpanEnd(xStr,xTextMatch,xVal)
{
var selectSpanMid = "οnclick='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 class="common_table">
				<tr>
					<td class="head">
						<span id="nav">测试页面</span> 
						<span id="help" οnclick="return showHelp('');"></span>
					</td>
				</tr>
				<tr>
					<td class="main">
						<table width="100%">
							<tr>
								<td width="17%" 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());
 %>