Ajax文本框输入提示

wlcxx98

浏览: 62851 次
性别:
来自: 长沙

最近访客更多访客>>

cuiwenxiao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Ajax ASP JavaScript VBScript SQL Server

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

前台文件

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>文本框输入提示</title>

<styletype="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>

<scripttype="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>

<inputtype="text"class="keyword"id="search"name="search"onkeyup="getKeyWord();"onclick="getKeyWord();"/>

<divid="keytishi"></div>

</body>

</html>

后台文件[input.asp]

<%@LANGUAGE="VBSCRIPT"CODEPAGE="65001"%>

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

rs.movenext

loop

Response.Write("<ul>")

color: #0000ff; background-co

分享到：

一个AJAX局部刷新的例子 | 关于rs.addnew后立即得到自动增长ID的问题

2008-02-03 11:29
浏览 901
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论