怎么实现2个文本框的ajax 自动补全啊???
小弟写了一个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>
[解决办法]
你的问题涉及两部:
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;
