用ajax自己写仿 google search suggest的搜索提示

最新推荐文章于 2015-10-07 19:27:00 发布

秦地小哥

最新推荐文章于 2015-10-07 19:27:00 发布

阅读量626

点赞数

文章标签： search ajax google function button stylesheet

无聊的时候写的,也没什么精练和安全可言,纯是为了好玩....而且我也没有像GOOGLE那样去考虑JS文件大小等等各种因素,我的目的是能实现能玩就可以了.呵呵.....

主要原理是这样:每次用户输入,就自动发送搜索的关键字到服务器端,如果有相关的已设定好的搜索,则返回到客户端.而客户端再通过DOM进行动态添加内容.而这一切都是异步的...呵呵.这就是AJAX了...我对这些不是太懂,如果写得不好,欢迎指正!!!!!

这里是客户端:

<!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=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' οnmοuseοver='beMouseOver(" + i +")' οnmοuseοut='beMouseOut(" + i + ")' οnclick='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>");

}
}

</script>
</head>

<body>

这里是服务器端:

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;}