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>
猜你喜欢
- 判断函数如下:Public Function CheckBIG(strSource As String) As BooleanDim idx
- 这个url的正则表达式判断的js!是比较全面的。它验证的情况包括!IP,域名(domain),ftp,二级域名,域名中的文件,域名加上端口!
- 和YSlow一样,“Page Speed”也是一个基于firebug附加组件的FireFox插件。虽然听起来有点拗口,但是意思很容易理解:如
- 安全性问题一直DBA是比较关心的问题,因为建立数据库的目的就是让相关的的客户端来进行访问,所以很难避免不出现安全隐患,例如客户端链接的权限、
- 微软在12月22日早上发布新的安全通告证实,一处远程执行代码漏洞影响到了整个SQL Server产品线。该漏洞的入侵代码在两周前已经被公布在
- 现像如下:站点无法打开,或者打开很慢.HTML可以打开.重新启动或者回收应用程序池可恢复.但过一段时间又会出现日志里会有:ISAPI
- Lightbox里面的一个函数,能把页面实际的高宽与浏览器可视面积的高宽保存在一个数组中..非常好用.什么是Lightbox?下载light
- 很多人一直都有个想法,要是可以随心所欲的操作iframe就好了。这样静态页面也就有了相当于后台动态页面php,jsp,asp中include
- 平时在PL/SQL中的编程中遇到一些问题,这里以问答的形式来进行把它们总结下来,以供大家分享。1、当需要向表中装载大量的数据流或者需要处理大
- ASP有一个最重要的功能,就是它可以让你非常轻松地连接数据库。通常都是和一个Access或者一个SQL数据库相连。因为Access是最容易起
- XMLHttpRequest的兼容代码功能结构上大体没有什么变动主要处理了这么几条:1.不同浏览器的创建方式2.事件大小写问题(ie7的XM
- 一.Memory Dumps 1).Global Area ALTER SESSION SET EVENTS ‘immediate trac
- 背景:pony是公司的首席体验官、首席产品经理。这次在产品峰会上pony将自己平时经验的积累与大家交流,体验较细。这次分享研发管理部,设计中
- 在Windows环境下,经常遇到系统Over的情况,如果你在新装了系统和SQL Server 2005后,需要把SQL Server2000
- [前言]:搭往公司的班车,遇到其他部门的同事,他问了很多关于我的工作的问题,由此引发这篇文章。这些问题,我也经常被其他人问到,其中既有我们亲
- 来看看javascript怎么实现自动点击超级链接吧,主要使用了js中的onclick事件。这里推荐大家看看这篇文章js鼠标事件大全。看了这
- 好记星不如烂笔头,适时的总结梳理知识让人更轻松愉快。今天总结下学习和开发中遇到的JavaScript执行顺序的问题,今天挖个坑,以后会慢慢填
- [编者注:]提起数据库,第一个想到的公司,一般都会是Oracle(即甲骨文公司)。Oracle在数据库领域一直处于领先地位。Oracle关系
- 没什么说的,就是生成随机数而已!!相关文章推荐:8个asp生成随机字符的函数<% Function gen_key(digi
- 速查表是帮你记住东西的有效工具。Web设计师和开发者经常使用的快捷键简表会使他们在网上的工作效率大大提高。事实上,速查表就是来帮助我们把日常