主要要文件有:
Index.Html 實現功能,一個文本框,輸入內容並實現提示
search.ASP 查詢功能,讓文本框輸入的內容在數據庫中查詢,然後返回給客戶端
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; 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
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="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>