ASP+JS实现GOOGLE搜索自动建议的代码
主要原理是这样:每次用户输入，就自动发送搜索的关键字到服务器端，如果有相关的已设定好的搜索，则返回到客户端。而客户端再通过DOM进行动态添加内容。而这一切都是异步的，这就是AJAX了。
这里是客户端：
程序代码
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="search_suggest.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var array=new Array(); //要SUGGEST的内容
var xhttp=new ActiveXObject("Microsoft.XMLHTTP");
var zz=-1; //此为指针
//函数生成下拉列表
function buildList(){
zz=-1;
document.getElementById("search_suggest").innerHTML="";
for(var i=0;i<array.length;i++){
if(array[i]!=""){
document.getElementById("search_suggest").innerHTML+="<div id=’item" + i + "’ class=’item_normal’ onmouseover=’beMouseOver(" + i +")’ onmouseout=’beMouseOut(" + i + ")’ onclick=’beClick(" + i + ")’>" + array[i] + "</div>";
}
}//for循环
}//函数
//函数鼠标经过效果
function beMouseOverEFF(i){
if ((i>=0)&(i<=array.length-1)){
document.getElementById("item" + i).className="item_high";
}
}
//函数鼠标移开效果
function beMouseOutEFF(i){
if ((i>=0)&(i<=array.length-1)){
document.getElementById("item" + i).className="item_normal";
}
}
//函数鼠标经过
function beMouseOver(i){
document.getElementById("key").focus();
beMouseOutEFF(zz);
zz=i;
beMouseOverEFF(zz);
}
//函数鼠标移开
function beMouseOut(i){
}
//函数单击
function beClick(i){
document.getElementById("key").value=array[i];
document.getElementById("key").className="key_normal";
document.getElementById("search_suggest").className="suggest_hidden";
document.getElementById("key").focus();
//zz=-1;
}
//方向键接收函数
function beKeyDown(){
//往下按
if (event.keyCode==40){
if(zz<array.length-1){beMouseOutEFF(zz++);}
if(zz<array.length){beMouseOverEFF(zz);}
}
//往上按
if (event.keyCode==38){
if (zz>0){beMouseOutEFF(zz--);}
if (zz>=0){beMouseOverEFF(zz);}
}
//按回车或者TAB
if (event.keyCode==13||event.keyCode==9){
if (zz!=-1){
beClick(zz);}
else
{
document.getElementById("search_button").focus();
}
}
}
//beKeyUp事件。与服务器通信
function beKeyUp(){
if(event.keyCode!=13&event.keyCode!=9&event.keyCode!=38&event.keyCode!=40){
if (document.getElementById("key").value.length>1){
mySearch();
}
}
}
//与服务器通迅
function mySearch(){
if (xhttp.readyState==4 || xhttp.readyState==0){
xhttp.open("get","search.asp");
xhttp.onReadyStateChange=handleSearchSuggest;
xhttp.send("<?xml version=’1.0’ encoding=’GB2312’?><request>" + escape(document.getElementById("key").value) + "</request>");
}
}
function handleSearchSuggest()
{
if (xhttp.readyState==4){
var root=xhttp.responseXML;
for(i=0;i<array.length;i++){array[i]="";}
for(i=0;i<root.childNodes(1).childNodes.length;i++){array[i]=root.childNodes(1).childNodes(i).text;}
if (array.length>0)
{
buildList();
document.getElementById("key").className="key_abnormal";
document.getElementById("search_suggest").className="search_suggest";
}
}
}
</script>
</head>
<body>
<div id="content">
<div id="search_input">
<input id="key" type="text" name="key" class="key_normal" onkeydown="beKeyDown()" onkeyup="beKeyUp()" onblur="beOnBlur()" />
<input type="button" name="search_button" id="search_button" value="搜索/进入" />
</div>
<div id="search_suggest" class="suggest_hidden">
<script type="text/javascript" language="javascript">buildList();</script>
</div>
</div>
<div id="ttt"></div>
</body>
</html>
这里是服务器端：
程序代码
Response.ContentType="text/xml"
Response.CharSet = "GB2312"
set getinfo=Server.CreateObject("Microsoft.XMLDOM")
getinfo.load(Request)
str=getinfo.selectSingleNode("//request").text
result="<?xml version=’1.0’ encoding=’GB2312’?><all>"
result=result & "<response>it’s a test!</response></all>"
只是测试用.没有具体操作内容,因为是异步的，所以不会有太卡的情况。
注意一下编码方式就可以了，不然在输入中文的时候会乱码，就这么多。
CSS文件：
程序代码
body{
font-size:0.75em;
border:0;
margin:250px 0 0 0;
padding:0;
}
#content{
width:450px;
margin:auto;}
#key{
width:300px;
margin:0;
padding:4px 0 0 5px;
}
.key_abnormal{
border-bottom:1px solid white;
border-left:1px solid #8298BF;
border-top:1px solid #8298BF;
border-right:1px solid #8298BF;
}
.key_normal{
border-bottom:1px solid #8298BF;
border-left:1px solid #8298BF;
border-top:1px solid #8298BF;
border-right:1px solid #8298BF;
}
#search_suggest{
margin:0;
padding:0;
width:300px;
height:50px;
border:1px solid black;}
.suggest_hidden{
display:none;
}
.item_normal{
width:100%;
overflow:hidden;
padding-left:5px;
padding-top:2px;}
.item_high{
padding-left:5px;
padding-top:2px;
background-color:#326BC5;
color:white;}
这里是客户端：
程序代码<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="search_suggest.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var array=new Array(); //要SUGGEST的内容
var xhttp=new ActiveXObject("Microsoft.XMLHTTP");
var zz=-1; //此为指针
//函数生成下拉列表
function buildList(){
zz=-1;
document.getElementById("search_suggest").innerHTML="";
for(var i=0;i<array.length;i++){
if(array[i]!=""){
document.getElementById("search_suggest").innerHTML+="<div id=’item" + i + "’ class=’item_normal’ onmouseover=’beMouseOver(" + i +")’ onmouseout=’beMouseOut(" + i + ")’ onclick=’beClick(" + i + ")’>" + array[i] + "</div>";
}
}//for循环
}//函数
//函数鼠标经过效果
function beMouseOverEFF(i){
if ((i>=0)&(i<=array.length-1)){
document.getElementById("item" + i).className="item_high";
}
}
//函数鼠标移开效果
function beMouseOutEFF(i){
if ((i>=0)&(i<=array.length-1)){
document.getElementById("item" + i).className="item_normal";
}
}
//函数鼠标经过
function beMouseOver(i){
document.getElementById("key").focus();
beMouseOutEFF(zz);
zz=i;
beMouseOverEFF(zz);
}
//函数鼠标移开
function beMouseOut(i){
}
//函数单击
function beClick(i){
document.getElementById("key").value=array[i];
document.getElementById("key").className="key_normal";
document.getElementById("search_suggest").className="suggest_hidden";
document.getElementById("key").focus();
//zz=-1;
}
//方向键接收函数
function beKeyDown(){
//往下按
if (event.keyCode==40){
if(zz<array.length-1){beMouseOutEFF(zz++);}
if(zz<array.length){beMouseOverEFF(zz);}
}
//往上按
if (event.keyCode==38){
if (zz>0){beMouseOutEFF(zz--);}
if (zz>=0){beMouseOverEFF(zz);}
}
//按回车或者TAB
if (event.keyCode==13||event.keyCode==9){
if (zz!=-1){
beClick(zz);}
else
{
document.getElementById("search_button").focus();
}
}
}
//beKeyUp事件。与服务器通信
function beKeyUp(){
if(event.keyCode!=13&event.keyCode!=9&event.keyCode!=38&event.keyCode!=40){
if (document.getElementById("key").value.length>1){
mySearch();
}
}
}
//与服务器通迅
function mySearch(){
if (xhttp.readyState==4 || xhttp.readyState==0){
xhttp.open("get","search.asp");
xhttp.onReadyStateChange=handleSearchSuggest;
xhttp.send("<?xml version=’1.0’ encoding=’GB2312’?><request>" + escape(document.getElementById("key").value) + "</request>");
}
}
function handleSearchSuggest()
{
if (xhttp.readyState==4){
var root=xhttp.responseXML;
for(i=0;i<array.length;i++){array[i]="";}
for(i=0;i<root.childNodes(1).childNodes.length;i++){array[i]=root.childNodes(1).childNodes(i).text;}
if (array.length>0)
{
buildList();
document.getElementById("key").className="key_abnormal";
document.getElementById("search_suggest").className="search_suggest";
}
}
}
</script>
</head>
<body>
<div id="content">
<div id="search_input">
<input id="key" type="text" name="key" class="key_normal" onkeydown="beKeyDown()" onkeyup="beKeyUp()" onblur="beOnBlur()" />
<input type="button" name="search_button" id="search_button" value="搜索/进入" />
</div>
<div id="search_suggest" class="suggest_hidden">
<script type="text/javascript" language="javascript">buildList();</script>
</div>
</div>
<div id="ttt"></div>
</body>
</html>
这里是服务器端：
程序代码Response.ContentType="text/xml"
Response.CharSet = "GB2312"
set getinfo=Server.CreateObject("Microsoft.XMLDOM")
getinfo.load(Request)
str=getinfo.selectSingleNode("//request").text
result="<?xml version=’1.0’ encoding=’GB2312’?><all>"
result=result & "<response>it’s a test!</response></all>"
只是测试用.没有具体操作内容,因为是异步的，所以不会有太卡的情况。
注意一下编码方式就可以了，不然在输入中文的时候会乱码，就这么多。
CSS文件：
程序代码body{
font-size:0.75em;
border:0;
margin:250px 0 0 0;
padding:0;
}
#content{
width:450px;
margin:auto;}
#key{
width:300px;
margin:0;
padding:4px 0 0 5px;
}
.key_abnormal{
border-bottom:1px solid white;
border-left:1px solid #8298BF;
border-top:1px solid #8298BF;
border-right:1px solid #8298BF;
}
.key_normal{
border-bottom:1px solid #8298BF;
border-left:1px solid #8298BF;
border-top:1px solid #8298BF;
border-right:1px solid #8298BF;
}
#search_suggest{
margin:0;
padding:0;
width:300px;
height:50px;
border:1px solid black;}
.suggest_hidden{
display:none;
}
.item_normal{
width:100%;
overflow:hidden;
padding-left:5px;
padding-top:2px;}
.item_high{
padding-left:5px;
padding-top:2px;
background-color:#326BC5;
color:white;}
