ASP+AJAX做类似google的搜索提示
时间：2008-10-24 13:49:00
主要要文件有:
Index.html 实现功能,一个文本框,输入内容并实现提示
search.asp 查询功能,让文本框输入的内容在数据库中查询,然后返回给客户端
conn.asp 数据库连接功能,实现与数据库相连 xmlhttp.js AJAX 核心部分,用来把客户端的数据传给服务端,再把服务端的数据返还给客户端.
style.css 样式文件,主要是对google提示框查询到的内容进行样式化处理
先看第一个文件style.css
[code=css]
@charset "utf-8";
/* 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;
}
第二个文件: xmlhttp.js
// JavaScript Documentrt
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 onmouseover="javascript：suggestOver(this);" ’;
suggest += ’onmouseout="javascript：suggestOut(this);" ’;
suggest += ’onclick="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’;
}
第三个文件:conn.asp
<％
set conn = Server.CreateObject("Adodb.Connection")
connStr = "Provider=SQLOLEDB;Server=.\SQLEXPRESS;UID=sa;PWD=sa;Initial catalog=test;"
conn.ConnectionString = connStr
conn.open
％>
第四个文件:search.asp
<％@LANGUAGE="VBSCRIPT" CODEPAGE="65001"％>
<!-- #include file="conn.asp" -->
<％
key = request.QueryString("key")if (key <> "") then
key = replace(key,"\","")
key = replace(key,"’","")
key = replace(key,"or","")
sel_sql = "select [key] from [key] where [key] like ’" & key & "％’"
dim keyword
keyword = ""set rs = conn.execute (sel_sql)
do while not rs.eof
keyword = keyword & rs(0) & "|"
rs.movenext
loopresponse.Write(keyword)
end if
％>
最后一个结果文件:index.html
<!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 src="xmlhttp.js" ></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" onkeyup="change_key()"/><br/>
<div id="search_suggest" ></div>
</form>
</body>
</html>
0
投稿猜你喜欢
asp和js两种方法判断远程图片是否存在
asp伪静态情况下实现的utf-8文件缓存实现代码
MySQL数据库性能优化的八大“妙手”
HTML+CSS 模仿Windows 7 桌面效果
asp如何用FSO对象显示一个文本文件？
将有安全问题的SQL过程删除，比较全面
网站设计输入了些什么？
用私有属性来拯救IE7缩放图片的失真
资料：MsSQL常用SQL语句
FrontPage服务器扩展
用色彩打造专业的视觉效果
学习XHTML和HTML之间的区别
SQL Server上进行表设计时表的主键设计问题
javascript图片预加载
MySQL故障：mysqld-nt: Sort aborted错误的原因及解决办法
