ASP模仿google suggest风格实现下拉菜单效果（模仿aj）这都可以

93 0 0

<%@LANGUAGE=”JAVASCRIPT” CODEPAGE=”936″%>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<style type=”text/css”>
<!–
.style1 {color: #FF0000}
.mouseOut
{
font-size:12px;
background: #708090;
color: #FFFAFA;
}
　　
.mouseOver
{
font-size:12px;
background: #FFFAFA;
color: #000000;
}
–>
</style>
　　 <script type=”text/javascript” language=”javascript”>
　　　　var xmlHttp;
　　　　var completeDiv;
　　　　var inputField;
　　　　var nameTable;
　　　　var nameTableBody;
　　　　var flag=false;
　　
　　　　function createXMLHttpRequest() {
　　　　　　if (window.ActiveXObject) {
　　　　　　　　xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
　　　　　　}
　　　　　　else if (window.XMLHttpRequest) {
　　　　　　　　xmlHttp=new XMLHttpRequest();　　　　　　　　
　　　　　　}
　　　　}
　　　　
　　　　function setflag(){
　　　　　　flag=true;
　　　　}
　　　　
　　　　function DisSelect()
　　　　{
　　　　　　if(flag==false)
　　　　　　document.getElementById(“popup”).style.display=”none”;
　　　　}
　　
　　　　function initVars() {
　　　　　　inputField=document.getElementById(“frmchangshang”);　　　　　　
　　　　　　nameTable=document.getElementById(“name_table”);
　　　　　　completeDiv=document.getElementById(“popup”);
　　　　　　nameTableBody=document.getElementById(“name_table_body”);
　　　　　　document.getElementById(“popup”).style.display=”block”;
　　　　}
　　
　　　　function findNames() {
　　　　　　initVars();
　　　　　　if (inputField.value.length > 0)
　　{
　　　　　　　　createXMLHttpRequest();
　　　　　　　　var url=”search.asp?names=” + inputField.value;　
　　　　　　　　xmlHttp.open(“GET”, url, true);
　　　　　　　　xmlHttp.onreadystatechange=callback;
　　　　　　　　xmlHttp.send(null);
　　　　　　}
　　else
　 {
　　　　　　　　clearNames();
　　　　　　}
　　　　}
　　
　　　　function callback() {
　　　　　　if (xmlHttp.readyState==4) {
　　　　　　　　if (xmlHttp.status==200)
　　　　　　　　{
　　 try
　　　　　　　　　　{
　　　　　　　　　　　　var name=xmlHttp.responseXML.getElementsByTagName(“name”)

[0].firstChild.data;
　　　　　　　　　　}
　　　　　　　　　　catch(e)
　　　　　　　　　　{
　　　　　　　　　　　　document.getElementById(“popup”).style.display=”none”;
　　　　　　　　　　　　clearNames();
　　　　　　　　　　}
　　　　　　　　　　setNames(xmlHttp.responseXML.getElementsByTagName(“content”));
　　　　　　　　}
　　　　　　　　else if (xmlHttp.status==204)
　　　　　　　　{
　　　　　　　　　　clearNames();
　　　　　　　　}
　　　　　　}
　　　　}
　　　　
　　　　function setNames(the_names) {　　　　　　
　　　　　　clearNames();
　　　　　　var size=the_names.length;
　　　　　　setOffsets();
　　　　　　var row,cell,spans;
　　　　　　for (var i=0; i < size; i++) {
　　　　　　　　//var nextNode=the_names[i].firstChild.data;
　　var e=the_names[i];
　　//取得子节点内容，重新装载为数组
　　var nextNode=e.getElementsByTagName(“name”)[0].firstChild.data;
　　//创建tr，td，span元素
　　　　　　　　row=document.createElement(“tr”);
　　　　　　　　cell=document.createElement(“td”);
　　//spans=document.createElement(“span”);
　　//设置cell属性
　　　　　　　　cell.onmouseout=function() {this.className=’mouseOver’; flag=false;};
　　　　　　　　cell.onmouseover=function() {this.className=’mouseOut’; flag=true;};
　　　　　　　　cell.setAttribute(“bgcolor”,”#FFFAFA”);
　　　　　　　　cell.setAttribute(“border”,”0″);
　　　　　　　　//cell.setAttribute(“onmouseover”,”setflag()”);
　　　　　　　　cell.onclick=function() { populateName(this); };
　　//将nextNode添加到td
　　var txtName=document.createTextNode(nextNode);
　　cell.appendChild(txtName);
　　//装载隐藏数据到span元素
　　row.appendChild(cell);
　　　　　　　　nameTableBody.appendChild(row);
　　　　　　}
　　　　}
　　
　　　　function setOffsets() {
　　　　　　var end=inputField.offsetWidth;
　　　　　　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=”400px”;
　　　　}
　　　　
　　　　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 populateName(cell) {
　　//填充数据到web页面，cell—->td对象
　　　　　　inputField.value=cell.firstChild.nodeValue;
　　　　　　clearNames();
　　　　}
　　　　//清除列表数组
　　　　function clearNames() {
　　　　　　var ind=nameTableBody.childNodes.length;
　　　　　　for (var i=ind – 1; i >=0 ; i–) {
　　　　　　　　 nameTableBody.removeChild(nameTableBody.childNodes[i]);
　　　　　　}
　　　　　　completeDiv.style.border=”none”;
　　　　}
</script>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>Untitled Document</title>
</head>
　　
<body>
<input name=”frmchangshang” class=”InputText” id=”frmchangshang”　style=”width:250px;”

onBlur=”DisSelect();” onKeyUp=”findNames();” size=”50″ maxlength=”100″>
　　　　　　　　　　 <span class=”style1″>提示：输入关键字，程序自动从库中匹配您

要找的记录，如果不存在自行填写
　　　　 </span>
　　　　　　　　　　<div style=”position:absolute;top:0;left:0;” id=”popup”>
　　　　　　　　　　　　<table id=”name_table” bgcolor=”#FFFAFA” border=”0″ cellspacing=”0″

cellpadding=”0″>　　　　　　
　　　　　　　　　　　　　　<tbody id=”name_table_body”></tbody>
　　　　　　　　　　　　</table>
　　　　　　　　　</div>
</body>
</html>

# 随心笔谈