本 站 搜 索

发 送 文 章 用 ajax 写仿 google search suggest 的搜索提示 〖评论()〗〖留言〗〖收藏〗 收信地址 填写收信人的电子邮箱 邮件主题 填写邮件主题 邮件内容 无聊的时候写的,也没什么精练和安全可言,纯是为了好玩....而且我也没有像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"headmeta http-equiv="Content-Type" content="text/html; charset=gb2312" /title无标题文档/titlelink 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;iarray.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(zzarray.length-1){beMouseOutEFF(zz++);}if(zzarray.length){beMouseOverEFF(zz);}} //往上按if (event.keyCode==38){if (zz0){beMouseOutEFF(zz--);}if (zz=0){beMouseOverEFF(zz);}} //按回车或者TABif (event.keyCode==13||event.keyCode==9){if (zz!=-1){beClick(zz);}else{document.getElementById("search_button").focus(); }}} //beKeyUp事件。与服务器通信function beKeyUp(){if(event.keyCode!=13event.keyCode!=9event.keyCode!=38event.keyCode!=40){if (document.getElementById("key").value.length1){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;iarray.length;i++){array[i]="";}for(i=0;iroot.childNodes(1).childNodes.length;i++){array[i]=root.childNodes(1).childNodes(i).text;}if (array.length0){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="搜索/进入" //divdiv id="search_suggest" class="suggest_hidden" script type="text/javascript" language="javascript"buildList();/script/div/divdiv 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").textresult="?xml version='1.0' encoding='GB2312'?all"result=result "responseit'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;}<br><br>文章网址：<a href="https://dangbai.cn/article.asp?ID=10001730" target="_blank">https://dangbai.cn/article.asp?ID=10001730</a> 填写邮件内容 发信地址 填写发信人的电子邮箱 邮件签名 填写邮件签名  验证码   填写验证码，单击刷新验证码    程序执行中，请稍候... 〖文章发送协议〗 ·欢迎使用本站在线文章发送系统。 ·不得使用本站在线发送邮件系统发送垃圾邮件、广告邮件。 ·如果收信人地址或其服务器出现错误，可能无法成功发送。 ·如果有什么问题，或者意见建议，请联系［网站管理员］。