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>
猜你喜欢
- 本文实例讲述了php延迟静态绑定的方法。分享给大家供大家参考。具体分析如下:php延迟静态绑定:指类的self,不是以定义时为准,而是以计算
- 前言在这篇文章 Go Mutex:保护并发访问共享资源的利器 中,主要介绍了 Go 语言中互斥锁 Mutex&
- 最好的学习方式就是实践。 我们通过导入gin包来深入学习。环境go 1.13.5goland 2019.3.1manjaro-gnome3.
- 一.背景一道ctf题,通过破解2048游戏获得flag游戏的规则很简单,需要控制所有方块向同一个方向运动,两个相同数字方块撞在一起之后合并成
- 本文实例讲述了python计算时间差的方法。分享给大家供大家参考。具体分析如下:1、问题:给定你两个日期,如何计算这两个日期之间间隔几天,几
- 当用到socket来进行网络程序开发时,大多数情况下会遇到中文字符的发送与接收,这时若对发送的字符串用默认的方式进行处理,则一般会得到一堆乱
- 上回书说到了对人脸的检测,这回就开始正式进入人脸识别的阶段。关于人脸识别,目前有很多经典的算法,当我大学时代,我的老师给我推荐的第一个算法是
- 什么是索引?哪些数据类型里有索引的概念? —> 字符串、列表、元组从最左边记录的位置开始就是索引索引用数字表示,起
- 如果你在Flask中启动过子线程,然后在子线程中读写过g对象或者尝试从request对象中读取url参数,那么,你肯定对下面这个报错不陌生:
- 关于如何获取 access_token 这个可以自己查百度开放的OAuth 2.0 的 API。这里不做介绍。第三方 Python 库pos
- 对于各种语言的,函数与定义方法,大家可以区分下,利用以后的学习应用。由于篇幅有限,完整地址:http://demo.aspxhome.com
- 1.Python虚拟环境创建首先我们为什么要创建虚拟环境呢?因为不同的项目所依赖的环境不一样,他们需要不同的第三方库等等。为了避免冲突,所以
- 起步线上部署时因设置了 settings.DEBUG = False 会导致静态文件都是 404 的情况。主要原因是应为关闭DEBUG模式后
- JavaScript中的标识符的命名有以下规则:由字母、数字、$、_组成以字母、$、_开头不可以使用保留字!!!要有意义!!!!!!!标识符
- 前言很久以前的博客才发现,发布一下。这个系列以后有时间再做。arp攻击arp路由链表,感兴趣的自行百度,我的博客我的笔记.路由指向介绍两个东
- 1.哆啦A梦“只要把愿望系在竹竿上请求月亮女神,心愿便能达成”。我超喜欢这句话。哆啦A梦的创造要追溯
- 最近好多伙伴说,我用vue做的项目本地是可以的,但部署到服务器遇到好多问题:资源找不到,直接访问index.html页面空白,刷新当前路由4
- 一、token是什么 Token: 访问资源的凭证。一般用户通过用户名密码登录后,服务端会将登录凭证做数字签名,加密之后的字符串作
- 学习Python,基本语法不是特别难,有了C的基本知识,理解比较容易。本文的主要内容是Python基础语法,学完后,能熟练使用就好。(开发环
- SQL Server数据库的六个实用技巧:(一)挂起操作在安装Sql或sp补丁的时候系统提示之前有挂起的安装操作,要求重启,这里往往重启无用