Ajax文本框输入提示

今天我来做一个Ajax文本框输入提示的例子:

前台文件

<! DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html;charset=utf-8" />
< title > 文本框输入提示 </ title >
< style type ="text/css" > ...
<!--
.keyword{...}{width:150px;height:20px;border:#0066FF1pxsolid;}/**//*文本框样式*/
#keytishi{...}{width:150px;height:auto;border:#0066FF1pxsolid;position:absolute;display:none;}/**//*提示层样式*/
#keytishiul{...}{margin:0;}/**//*提示层样式*/
#keytishiulli{...}{margin:0;list-style-type:none;line-height:16px;height:16px;font-size:12px;padding:2px;}/**//*提示层样式*/
#keytishiullia{...}{display:block;width:150px;height:16px;text-decoration:none;}/**//*提示层样式*/
#keytishiullia:hover{...}{background-color:#0099FF;}/**//*提示层样式*/
-->
</ style >
< script type ="text/javascript" > ...
<!--

//建立XMLHttpRequest对象
varxmlhttp;
try...{
xmlhttp=newActiveXObject('Msxml2.XMLHTTP');
}catch(e)...{
try...{
xmlhttp=newActiveXObject('Microsoft.XMLHTTP');
}catch(e)...{
try...{
xmlhttp=newXMLHttpRequest();
}catch(e)...{}
}
}

functiongetKeyWord()...{
varobj=document.getElementById("search");//获取文本域对象
if(obj.value=="")...{
return;
}
vartop=0;
varleft=0;
while(obj)...{//此循环得到文件域对象在页面中的绝对位置
top+=obj["offsetTop"];
left+=obj["offsetLeft"];
obj=obj.offsetParent;
}
xmlhttp.open("get","input.asp?keyword="+document.getElementById("search").value,true);
xmlhttp.onreadystatechange=function()...{
if(xmlhttp.readyState==4)
...{
if(xmlhttp.status==200)
...{
if(xmlhttp.responseText!="")...{
document.getElementById("keytishi").innerHTML=unescape(xmlhttp.responseText);//把后台返回的数据填充到提示层
document.getElementById("keytishi").style.left=left+"px";//设置提示层的位置,左
document.getElementById("keytishi").style.top=(top+25)+"px";//设置提示层的位置,上
document.getElementById("keytishi").style.display="block";//设置提示层可见
}else...{
document.getElementById("keytishi").innerHTML="";//清空提示层
document.getElementById("keytishi").style.display="none";//设置提示层不可见
}
}
else...{

}
}
}
xmlhttp.setRequestHeader("If-Modified-Since","0");
xmlhttp.send(null);
}
functioninput(str)...{
document.getElementById("search").value=str;//从提示层选择你需要的数据填充到文本框
document.getElementById("keytishi").innerHTML="";//清空提示层
document.getElementById("keytishi").style.display="none";//设置提示层不可见
}
//-->
</ script >
</ head >
< body >
< input type ="text" class ="keyword" id ="search" name ="search" onkeyup ="getKeyWord();" onclick ="getKeyWord();" />
< div id ="keytishi" ></ div > <!-- 提示层 -->
</ body >
</ html >

后台文件[input.asp]

<% ... @LANGUAGE="VBSCRIPT"CODEPAGE="65001" %>
<!-- #includefile="conn.asp" -->
<% ...
dimrs
dimsql

dimkeyWords

keyWrods=Request("keyword")

Setrs=Server.CreateObject("ADODB.Recordset")
sql="select*fromking_testwherekeywordlike'%"&keyWrods&"%'"
rs.opensql,conn,1,1
ifnot(rs.bofandrs.eof)then
Response.Write("<ul>")
dowhilenotrs.eof
%>
< li >< a href ="javascript:void(null);" onclick ="input('<%Response.Write(escape(rs(" keyword")))% > ');"> <% ... Response.Write(escape(rs("keyword"))) %> </ a ></ li >
<% ...
rs.movenext
loop
Response.Write("<ul>")