ASP+AJAX做类似google的搜索提示

香河家具城5

香河家具城5

2016-02-19 20:36

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的ASP+AJAX做类似google的搜索提示教程,一起来看看吧!超容易上手~

主要要文件有:

Index.html 实现功能,一个文本框,输入内容并实现提示

search.asp 查询功能,让文本框输入的内容在数据库中查询,然后返回给客户端

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

conn.asp 数据库连接功能,实现与数据库相连 xmlhttp.js AJAX 核心部分,用来把客户端的数据传给服务端,再把服务端的数据返还给客户端.

style.css 样式文件,主要是对google提示框查询到的内容进行样式化处理

先看第一个文件style.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; istr.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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

%@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
loop

response.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" /
titlegoogle提示  /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

展开更多 50%)
分享

猜你喜欢

ASP+AJAX做类似google的搜索提示

Web开发
ASP+AJAX做类似google的搜索提示

ajax Suggest类似google的搜索提示效果

Web开发
ajax Suggest类似google的搜索提示效果

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

仿google搜索提示 SuggestFramework的使用

Web开发
仿google搜索提示 SuggestFramework的使用

asp+ajax实现静态页面分页的代码

Web开发
asp+ajax实现静态页面分页的代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

asp+Ajax简单客户登陆验证

Web开发
asp+Ajax简单客户登陆验证

ASP+Ajax实现无刷新评论简单例子

Web开发
ASP+Ajax实现无刷新评论简单例子

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

HTML语言教程:HTML头部信息(Head)

HTML语言教程:HTML头部信息(Head)

如何学好数据库编程?

如何学好数据库编程?
下拉加载更多内容 ↓