Ajax文本框输入提示

最新推荐文章于 2024-06-19 16:38:17 发布

原创最新推荐文章于 2024-06-19 16:38:17 发布 · 3.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #xmlhttprequest #search #vbscript #function #input

JAVASCRIPT 同时被 2 个专栏收录

14 篇文章

订阅专栏

ASP

12 篇文章

订阅专栏

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

前台文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

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

<!--

.keyword {width:150px; height:20px; border:#0066FF 1px solid;}/*文本框样式*/

#keytishi {width:150px; height:auto; border:#0066FF 1px solid; position:absolute; display:none;}/*提示层样式*/

#keytishi ul { margin:0;}/*提示层样式*/

#keytishi ul li{margin:0;list-style-type:none; line-height:16px; height:16px; font-size:12px; padding:2px;}/*提示层样式*/

#keytishi ul li a {display:block; width:150px; height:16px; text-decoration:none;}/*提示层样式*/

#keytishi ul li a:hover {background-color:#0099FF;}/*提示层样式*/

-->

</style>

<!--

//建立XMLHttpRequest对象

var xmlhttp;

try{

xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');

}catch(e){

try{

xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');

}catch(e){

try{

xmlhttp= new XMLHttpRequest();

}catch(e){}

}

function getKeyWord(){

var obj = document.getElementById("search");//获取文本域对象

if(obj.value==""){

return;

}

var top=0;

var left=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);

}

function input(str){

document.getElementById("search").value=str;//从提示层选择你需要的数据填充到文本框

document.getElementById("keytishi").innerHTML = "";//清空提示层

document.getElementById("keytishi").style.display = "none";//设置提示层不可见

}

//-->

</script>

</head>

<body>

</body>

</html>

后台文件 [input.asp]

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

dim rs

dim sql

dim keyWords

keyWrods = Request("keyword")

Set rs = Server.CreateObject("ADODB.Recordset")

sql = "select * from king_test where keyword like '%"&keyWrods&"%'"

rs.open sql,conn,1,1

if not (rs.bof and rs.eof) then

Response.Write("<ul>")

do while not rs.eof

rs.movenext

loop

Response.Write("<ul>")

end if

rs.close

set rs = nothing

conn.close

Set conn = nothing

escape与unescape是用来编码的和解码的,这是为了避免汉字出现乱码

在XP + IE6,7,Firefox测试通过