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

时间:2016-02-24 12:26 来源: 我爱IT技术网作者:佚名

欢迎您访问我爱IT技术网，今天小编为你分享的编程技术是：【ASP+AJAX做类似google的搜索提示】，下面是详细的分享！

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

主要要文件有:

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

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

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

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

先看第一个文件style.css

以下为引用的内容：

[code=css]
@charset "utf-8";

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();

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"%>

<%
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" />
<title>google提示 </title>
<script src=http://www.chinaz.com/program/2008/1024/"xmlhttp.js" ></script>
<link rel="stylesheet" type="text/css" href=http://www.chinaz.com/program/2008/1024/"style.css">
</head>

以上所分享的是关于ASP+AJAX做类似google的搜索提示，下面是编辑为你推荐的有价值的用户互动：

　　相关问题：怎么做个类似于谷歌的简单搜索网站

　　答：在网上找个模板就可以了。你要的搜索范围是多少？如果仅限于你自己的网站的话，可以考虑自己编个所搜引擎。比这个大的话，建议直接用引用GOOGLE活着BAIDU的引擎。 >>详细

　　相关问题：请教如何做出类似google、百度双重搜索的界面

　　答：Google+(baidu bing youdao) | “四核”搜索引擎查看原帖>> >>详细

　　相关问题：万能的百度请告诉我：怎么样才能在搜索的时候跟Goo...

　　答：1、Google的"AND" 语法在百度这样用："手机报价" 注意：复制冒号后的检索串，不包括引号，"手机"与"报价"两个词中有空格如链接中的效果：http://www.baidu.com/baidu?wd=%CA%D6%BB%FA+%B1%A8%BC%DB&tn=monline_dg 2、Google的"NOT" 语法在百度... >>详细

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）

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

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

以上所分享的是关于ASP+AJAX做类似google的搜索提示，下面是编辑为你推荐的有价值的用户互动：

最新教程

相关教程