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

主要要文件有:

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

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

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

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

先看第一个文件

 

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 

 

 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

 

) 
connStr = "Provider=SQLOLEDB;Server=.\SQLEXPRESS;UID=sa;PWD=sa;Initial catalog=test;" 
conn.ConnectionString = connStr 
conn.open 
%> 

 

第四个文件:search.asp

 

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

 

最后一个结果文件:

>