Ajax文本框输入提示

一个Ajax文本框输入提示的例子，用asp实现:前台文件1.!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=utf-8/5.title文本框输入提示/title6.styletype=text/css...7.!--8..keyword{...}{width:150px;height:20px;border:#0066FF1pxsolid;}/**//*文本框样式*/9.#keytishi{...}{width:150px;height:auto;border:#0066FF1pxsolid;position:absolute;display:none;}/**//*提示层样式*/10.#keytishiul{...}{margin:0;}/**//*提示层样式*/11.#keytishiulli{...}{margin:0;list-style-type:none;line-height:16px;height:16px;font-size:12px;padding:2px;}/**//*提示层样式*/12.#keytishiullia{...}{display:block;width:150px;height:16px;text-decoration:none;}/**//*提示层样式*/13.#keytishiullia:hover{...}{background-color:#0099FF;}/**//*提示层样式*/14.--15./style16.scripttype=text/javascript...17.!--18.19.//建立XMLHttpRequest对象20.varxmlhttp;21.try...{22.xmlhttp=newActiveXObject('Msxml2.XMLHTTP');23.}catch(e)...{24.try...{25.xmlhttp=newActiveXObject('Microsoft.XMLHTTP');26.}catch(e)...{27.try...{28.xmlhttp=newXMLHttpRequest();29.}catch(e)...{}30.}31.}32.33.functiongetKeyWord()...{34.varobj=document.getElementById(search);//获取文本域对象35.if(obj.value==)...{36.return;37.}38.vartop=0;39.varleft=0;40.while(obj)...{//此循环得到文件域对象在页面中的绝对位置41.top+=obj[offsetTop];42.left+=obj[offsetLeft];43.objobj=obj.offsetParent;44.}45.xmlhttp.open(get,input.asp?keyword=+document.getElementById(search).value,true);46.xmlhttp.onreadystatechange=function()...{47.if(xmlhttp.readyState==4)48....{49.if(xmlhttp.status==200)50....{51.if(xmlhttp.responseText!=)...{52.document.getElementById(keytishi).innerHTML=unescape(xmlhttp.responseText);//把后台返回的数据填充到提示层53.document.getElementById(keytishi).style.left=left+px;//设置提示层的位置,左54.document.getElementById(keytishi).style.top=(top+25)+px;//设置提示层的位置,上55.document.getElementById(keytishi).style.display=block;//设置提示层可见56.}else...{57.document.getElementById(keytishi).innerHTML=;//清空提示层58.document.getElementById(keytishi).style.display=none;//设置提示层不可见59.}60.}61.else...{62.63.}64.}65.}66.xmlhttp.setRequestHeader(If-Modified-Since,0);67.xmlhttp.send(null);68.}69.functioninput(str)...{70.document.getElementById(search).value=str;//从提示层选择你需要的数据填充到文本框71.document.getElementById(keytishi).innerHTML=;//清空提示层72.document.getElementById(keytishi).style.display=none;//设置提示层不可见73.}74.//--75./script76./head77.body78.inputtype=textclass=keywordid=searchname=searchonkeyup=getKeyWord();onclick=getKeyWord();/79.divid=keytishi/div!--提示层--80./body81./html后台文件[input.asp]1.%...@LANGUAGE=VBSCRIPTCODEPAGE=65001%2.!--#includefile=conn.asp--3.%...4.dimrs5.dimsql6.7.dimkeyWords8.9.keyWrods=Request(keyword)10.11.Setrs=Server.CreateObject(ADODB.Recordset)12.sql=select*fromking_testwherekeywordlike'%&keyWrods&%'13.rs.opensql,conn,1,114.ifnot(rs.bofandrs.eof)then15.Response.Write(ul)16.dowhilenotrs.eof17.%18.liahref=javascript:void(null);onclick=input('%Response.Write(escape(rs(keyword)))%');%...Response.Write(escape(rs(keyword)))%/a/li19.%...20.rs.movenext21.loop22.Response.Write(ul)23.endif24.rs.close25.setrs=nothing26.conn.close27.Setconn=nothing28.%escape与unescape是用来编码的和解码的,这是为了避免汉字出现乱码，在XP+IE6,7,Firefox测试通过