[会员中心]    [设为主页][加入收藏][发布文章]  [中文繁體]
电脑
软件
手机
软件
网站
源码
文章
资料
    文 章 搜 索
[选项]
    推 荐 文 章       More...
华硕易电脑(ASUS Eee PC 1025C)驱动程序(Windows XP)安装参考(图) 华硕易电脑(ASUS Eee PC 1025C..
  先来段开场白:为了外出携..
Acronis True Image 使用说明 Acronis True Image 使用说明
  一款可以在Windows下使用..
Norton Ghost 使用详解 Norton Ghost 使用详解
一、分区备份   使用Ghost..
Windows 2000/XP/2003 系统封装参考及工具 Windows 2000/XP/2003 系统封..
  一直以来,安装操作系统和..
    阅 读 排 行
Intel GMA 3600 V1.15 for Windows XP 驱动程序配置过程图解 Intel GMA 3600 V1.15 for Window..
Intel GMA 3600 V1.15 for Window..
夏普(SHARP) AR-1808S 以 A4 尺寸纸张扫描 夏普(SHARP) AR-1808S 以 A4 尺..
  新装的夏普(SHARP) AR-1808S..
中国电信的家庭宽带设置“端口映射”及获取公网IP地址 中国电信的家庭宽带设置“端口映..
  现在有些家庭/店铺安装了视..
路由器串联(路由器的分支再接一个路由器) 路由器串联(路由器的分支再接一..
  问题:路由器的分支再接一个..
XHTML 中 a 标签 target 属性失效的解决方法 XHTML 中 a 标签 target 属性失..
  在HTML 4.01/XHTML 1.0/XHTML..
19寸液晶显示器更换显卡后没有分辨率 1440*900 19寸液晶显示器更换显卡后没有分..
  宿舍的电脑更换显卡后,驱动..
申请/注销/关闭腾讯QQ空间 申请/注销/关闭腾讯QQ空间
  申请/注销/关闭腾讯QQ空间网..
电脑机箱(主板)前面板 USB 数据线的接线参考(图) 电脑机箱(主板)前面板 USB 数据..
  一、概述   因为每个 US..
  文 章 信 息
    用 ajax 写仿 google search suggest 的搜索提示
[留言][评论][收藏]
[文章分类:电脑系统/网络/HTML/CSS/JavaScript][字体:隶体/楷体/宋体/黑体][字号:12px/14px/16px/18px][颜色:] 

        无聊的时候写的,也没什么精练和安全可言,纯是为了好玩....而且我也没有像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' 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;}


文章作者:未知  整理日期:2007-07-09
[文章浏览:][打印文章][发送文章]
阅读说明
·本站大部分文章转载于网络,如有侵权请留言告知,本站即做删除处理。
·本站法律法规类文章转载自[中国政府网(www.org.cn)],相关法律法规如有修订,请浏览[中国政府网]网站。
·本站转载的文章,不为其有效性,实效性,安全性,可用性等做保证。
·如果有什么问题,或者意见建议,请联系[网站管理员]
原“浪人文章”网站改名“老若尔文章站”,域名:article.lre.cn
本站使用【啊估文章站】网站系统    [联系网站管理员]         闽ICP备08009617号