STYLE.CSS文件
/* CSS Document */
body
{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
} !
#search_suggest
{
position:absolute;
background:#FFFFFF;
text-align:left;
border:1px #000000 solid;
} .
.suggest_link_over
{
background-color:#e8f2fe;
padding:2px 6px;
} ..
.suggest_link
{
padding:2px 6px;
background-color:#FFFFFF;
} !
.none
{
display:none;
}
index.asp文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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>google提示 </title>
<script language="javascript">
var xmlHttp = createXmlHttpRequest();
function createXmlHttpRequest()
{
var xmlhttp = null;
try
{
xmlhttp = XMLHttpRequest();
}
catch(e1)
{
try
{
xmlhttp = new ActiveXObject("MSXML2.XMLHTTP");
}
catch(e2)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e3)
{
xmlhttp = false;
alert("创建失败!");
}
}
}
return xmlhttp;
}
function change_key()
{
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{
var str = document.getElementById("txt_key").value;
xmlHttp.open("get","search.asp?key=" + str,true);
xmlHttp.onReadyStateChange = handSearchRequest;
xmlHttp.send(null);
}
}
function handSearchRequest()
{
if (xmlHttp.readyState == 4)
{
var div = document.getElementById("search_suggest");
div.innerHTML = "";
var str = xmlHttp.responseText.split("|");
for (var i=0; i<str.length; i++)
{
var suggest = '<div οnmοuseοver="javascript:suggestOver(this);"';
suggest += 'οnmοuseοut="javascript:suggestOut(this);"';
suggest += 'οnclick="javascript:setSearch(this.innerHTML);"';
suggest += 'class="suggest_link">'+ str[i] + '</div>';
div.innerHTML += suggest;
}
}
}
function setSearch(div_value)
{
document.getElementById("txt_key").value = div_value;
document.getElementById("search_suggest").className = 'none';
}
function suggestOver(div_value)
{
div_value.className = 'suggest_link_over';
}
function suggestOut(div_value)
{
div_value.className = 'suggest_link';
}
</script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<input name="txt_key" type="text" id="textarea" autocomplete="off" οnkeyup="change_key()"/><br/>
<div id="search_suggest" ></div>
</form>
</body>
</html>
search.asp文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<%
key = request.QueryString("key")
if (key <> "") then
dim conn,rs,connstr,sqlcmd
set conn=Server.CreateObject("Adodb.connection")
connstr="PROVIDER=SQLOLEDB;data source=localhost;uid=ZBTEST;pwd=123456;database=ZBTEST;"
conn.open connstr
sqlcmd = "select top 10 id from number where id like '" & key & "%'"
Set rs=Server.CreateObject("Adodb.recordset")
rs.open sqlcmd,conn
while not rs.EOF
keyword = keyword & rs(0) & "|"
rs.movenext
wend
Response.write(keyword)
rs.close
set rs=nothing
set conn=nothing
end if
%>
</body>
</html>