一个类似于google搜索提示的功能
发布时间:2007-3-30 15:40:04
我们在google网站首页搜索东西的时候,当我们一边输入内容,google搜索框下面会有一个提示,提示相关内容在google中能搜索到多少结果,大家可以到google首页上试一下.我们现在实现一个类似于该提示功能的功能,大家有兴趣可以到http://www.wucq.cn/ajax/ajax7.html上看一下效果,可以用来测试的数据现在只有几个,如1、12、123、2、3、4,只是让大家看一下效果罢了,功能大家可以自己再扩展一下.
数据库:Access XP
数据表名:pro_city
数据表结构:
字段名 数据类型 字符长度
pro 文本型 20
city 文本型 20
文件名:ajax7.html(用户界面文件)/ajax7_2.asp(后台处理ASP页面)/ajax7.mdb(数据库文件)
数据样例:
pro city
1 1_1
12 12_1
123 123_1
1 1_2
1 1_3
原理;通过XMLHttpRequest把文本输入框内输入的内容传送给后台处理页面,后台处理完之后能过回调函数取得值,然后再把值输出在信息提示层上.
下面把两个文件的源文件均附上,并附上简单说明:
ajax7.html
---------------
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Language' content='zh-cn' />
<meta http-equiv='Content-Type' content='text/html; charset=gb2312' />
<title>不想说乔丹</title>
<style type="text/css">
#show_city {position:absolute;z-index:3;left:0;top:26px;width:100px;}/*提示信息层样式*/
#pro {border:1px solid #ccc;height:20px;width:100px;}/*文本输入框样式*/
body {margin:0;}
</style>
<script type="text/javascript">
/*
类似于google的信息提示效果
不想说乔丹2007-3-29
wggipkhgef@yahoo.com.cn
http://www.wgg.com.cn http://www.wucq.cn
*/
function createXHR() {
//建立XMLHttpRrquest对象
if (window.ActiveXObject) xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
if (xmlhttp.overrideMimeType) xmlhttp.overrideMimeType("text/xml");
}
}
function show_citys(){
pro=document.getElementById("pro")
city=document.getElementById("show_city")
if (pro.value.length>0){ //判断文本输入框是否有值输入
createXHR(); //调用XMLHttpRequest对象建立函数
xmlhttp.onreadystatechange=show_title; //回调函数是show_title
//调用URL为带参数的ASP页面,该页面接收文本框输入值,从数据库内取出相对应的所有提示记录
url="ajax7_2.asp?pro="+pro.value;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else {
city.innerHTML="";
show_divs();
}
}
function show_title(){
if (xmlhttp.readyState==4){
if (xmlhttp.status==200){
citys=xmlhttp.responseText; //取得ASP页面返回的值
city_show=document.getElementById("show_city");
if (citys!=""){
city_a=citys.split(",");
city="";
pro=city_a[0];
for (i=0;i<city_a.length;i++){//将ASP页面处理值赋给city
if (i==0) city+=city_a[i];
else city=city+"<br />"+city_a[i];
}
city_show.innerHTML=city;//将city值在信息提示层显示
}
else city_show.innerHTML="";
show_divs();//调用信息提示层显示外观样式
}
}
}
function show_divs(){
city_show=document.getElementById("show_city");
if (city_show.innerHTML!=""){//判断信息提示层是否存在内容
city_show.style.border="1px #ccc solid";//信息提示层边框
city_show.style.backgroundColor="#fff";//颜色设为白色或比较浅的颜色，如不好决定可设为#ccc，即与边框相同色
city_show.style.borderTop="0";
}
else city_show.style.border="0";
}
</script>
</head>
<body>
<form action="#">
<input id="pro" type="text" value="" onkeyup="javascript:show_citys();" size="20" />
</form>
<div id="show_city"></div>
<div id="sm">目前可测试数据为:1/12/123/2/3/4</div>
</body>
</html>
------------------------------------------
ajax7_2.asp
---------------
<%
'数据库内连接语句，数据库驱动
connstr="DBQ="+server.mappath("ajax7.mdb")+";DefaultDir=;DRIVER={Microsoft Access Driver (*.mdb)};"
set conn=server.createobject("ADODB.CONNECTION")
conn.open connstr'获得参数,从数据库内取出相对应的值
pro=request("pro")
pro=trim(pro)
set rs=server.createobject("adodb.recordset")
sql="select distinct [city] from [pro_city] where [pro]='"&pro&"' order by [city] desc"
rs.open sql,conn,1,1
if not (rs.eof and rs.bof ) then
for i=1 to rs.recordcount
if i=1 then
city=city&trim(rs("city"))
else
city=city&","&trim(rs("city"))
end if
rs.movenext
next
end if
rs.close
set rs=nothing
conn.close
set conn=nothing
response.charset="gb2312"
response.write city
%>
