小弟写了一个ajax信息自动补全的例子:怎么实现2个文本框的补全啊??
<script language="javascript" type="text/javascript">
function mainLoop()
{
//val = escape(queryField.value);
val = queryField.value;
if (lastVal != val)
{
var response = AjaxMethod.GetSearchItems(val);
showQueryDiv(response.value);
lastVal = val;
}
setTimeout('mainLoop()',100);
return true;
}
</script> </head>
<body onload="javascript:InitQueryCode('TextBox1')">
<form id="Form1" method="post" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</form>
</body>
<script language="javascript" type="text/javascript">
function mainLoop()
{
//val = escape(queryField.value);
val = queryField.value;
if (lastVal != val)
{
var response = AjaxMethod.GetSearchItems(val);
showQueryDiv(response.value);
lastVal = val;
}
setTimeout('mainLoop()',100);
return true;
}
</script> </head>
<body onload="javascript:InitQueryCode('TextBox1')">
<form id="Form1" method="post" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</form>
</body>
解决方案 »
- Timer1 间隔时间起作用
- UpdatePanel实现下拉框二级联动
- 2个基础语法问题，就这点分了，不好意思
- 新人求助vs2005 项目发布与维护问题!
- 问一个正则表达式,只有10分了，请各位大侠笑纳
- 不能在 DropDownList 中选择多个项
- Windows平台下，oracle的效果好不好，跟SQL2000哪个更好！！
- 请教关于session的用法，最好能举出一个例子来！
- 刷新页面的时候.会触发哪些事件?
- 我从ACESS表里提取一个逻辑字段val,绑到datagrid显示为'true或false'，我要显示'是或否'，怎么办？
- 求个asp.net新闻采集例子
- 网站挂外网后,在访问网站时会出现一个登陆对话框,内容大概是:连接到(访问的网址),然后是正在连接到(访问的网址),然后就要求输入用户名和
AJAX取相关信息文本框自动补齐----------
var intIndex = 0;
var intMouseX;
var intMouseY;
var intDivShowFlag = 0;
var intTextShowFlag = 0;function InitSmartPromptList(arrList)
{
if (arrList.constructor != Array)
{
return;
} arrList.sort
(
function(a, b)
{
if(a.length>b.length)
{
return 1;
}
else if(a.length==b.length)
{
return a.localeCompare(b);
}
else
{
return -1;
}
}
);
}
function SmartPromptList(arrList, objInputId)
{
var objouter = document.getElementById("__SmartDiv"); //Div
var objInput = document.getElementById(objInputId); //TextBox
var selectedIndex = -1;
var intTmp; //Temp variant to do loop... if (objInput==null)
{
return;
} //textbox lost focus
objInput.onblur =
function()
{
if(IsInRect() == false)
{
objouter.style.display = 'none';
}
};
//Div lost focus
objouter.onblur =
function()
{
if(IsInRect() == false)
{
objouter.style.display = 'none';
}
}; function IsInRect()
{
intRectX_Min = objouter.offsetLeft;
intRectX_Max = objouter.offsetLeft + objInput.clientWidth;
intRectY_Min = objInput.offsetTop;
intRectY_Max = objInput.offsetTop + objInput.clientHeight + 300; if(
intMouseX >= intRectX_Min &&
intMouseX <= intRectX_Max &&
intMouseY >= intRectY_Min &&
intMouseY <= intRectY_Max
)
{
return true;
}
else
{
return false;
}
} //Key in some text in textbox
objInput.onkeyup = checkKeyCode;
//TextBox gets focus
objInput.onfocus = checkAndShow; function checkKeyCode()
{
var ie = (document.all)? true:false;
if (ie)
{
var keyCode = event.keyCode; if (keyCode==40||keyCode==38)
{
//[Up] or [Down]
var isUp = false;
if(keyCode==40)
{
isUp=true;
} changeSelection(isUp);
}
else if (keyCode==13)
{
//[Enter]
outSelection(selectedIndex);
}
else
{
checkAndShow();
}
}
else
{
checkAndShow();
}
divPosition();
} function checkAndShow()
{
var strInput = objInput.value;
divPosition();
selectedIndex = -1;
objouter.innerHTML = "";
for (intTmp=0;intTmp<arrList.length;intTmp++)
{
if (arrList[intTmp].substr(0, strInput.length).toUpperCase() == strInput.toUpperCase())
{
addOption(arrList[intTmp]);
}
}
objouter.style.display='';
function addOption(value)
{
objouter.innerHTML += "<div onmouseover=\"this.className='SmartDiv_SelectedStyle'\" onmouseout=\"this.className='';\" onmousedown=\"document.getElementById('"+objInputId+"').value='" + value + "';document.getElementById('__SmartDiv').style.display='none';\">" + value + "</div>";
}
} function changeSelection(isUp)
{
if (objouter.style.display == 'none')
{
objouter.style.display='';
}
else
{
if (isUp)
{
selectedIndex++;
}
else
{
selectedIndex--;
}
}
var maxIndex = objouter.children.length - 1;
if (selectedIndex < 0)
{
selectedIndex = 0;
}
if (selectedIndex>maxIndex)
{
selectedIndex = maxIndex;
}
for (intTmp=0; intTmp <= maxIndex; intTmp++)
{
if (intTmp == selectedIndex)
{
objouter.children[intTmp].className = "SmartDiv_SelectedStyle";
}
else
{
objouter.children[intTmp].className = "";
}
}
} function outSelection(Index)
{
objInput.value = objouter.children[Index].innerText;
objouter.style.display = 'none';
} function divPosition()
{
objouter.style.top = getAbsoluteHeight(objInput)+getAbsoluteTop(objInput);
objouter.style.left = getAbsoluteLeft(objInput);
objouter.style.width = getAbsoluteWidth(objInput);
}
} document.write("<div id='__SmartDiv' style='position:absolute;display:none;background:#E6E6FA;border: 1px solid #CCCCCC;font-size:14px;cursor: default;height:300px;overflow:auto;'> </div>");
document.write("<style>.SmartDiv_SelectedStyle{background-Color:#102681;color:#FFFFFF}</style>"); function getAbsoluteHeight(ob)
{
return ob.offsetHeight;
}
function getAbsoluteWidth(ob)
{
return ob.offsetWidth;
}
function getAbsoluteLeft(ob)
{
var mendingLeft = ob .offsetLeft;
while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" )
{
mendingLeft += ob.offsetParent.offsetLeft;
ob = ob.offsetParent;
} return mendingLeft ;
}
function getAbsoluteTop(ob)
{
var mendingTop = ob.offsetTop;
while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" )
{
mendingTop += ob .offsetParent.offsetTop;
ob = ob.offsetParent;
} return mendingTop ;
} function onMouseMove()
{
try
{
intMouseX = event.clientX + document.body.scrollLeft - document.body.clientLeft;
intMouseY = event.clientY + document.body.scrollTop - document.body.clientTop;
}
catch(e)
{
}
} document.onmousemove = onMouseMove;
intIndex = pArray.length;
//(2)Init
InitSmartPromptList(pArray);
//(3)Set Div
SmartPromptList(pArray, 文本框ID);pArray是你用Ajax取得的补齐相关内容怎么找补齐内容,用服务端代码很好写,也就不用说了(搞复杂了就要分词了),JS代码里面也有相应的东西可以参考