您的位置：首页 > 编程语言 > Go语言

AJAX实现仿Google Suggest效果

2007-07-09 00:00 826 查看
修复了一些细节代码（支持持续按键事件）
*项目名称:AJAX实现类Google Suggest效果
*作者:草履虫(也就是蓝色的ecma)
*联系:caolvchong@gmail.com
*时间:2007-7-7
*工具: DreamWeaver(写ASP),Aptana(写Javascript,HTML和CSS),Emeditor(写这篇文章),Access2003(数据库)
*测试平台:Firefox2.0,IE6.0,IE7.0
*演示地址:http://finish.3322.org/suggest/index.htm(短期有效,在本机上,可能访问不顺畅)
*原文地址:http://cceer.xmu.edu.cn/blog/view.asp?id=55(转贴,使用请注明)
*:文件结构:
index.htm:首页,展现效果
ajax_result.asp:ajax调用后台返回结果文件
result.asp:搜索结果文件,这个我并没有做,具体功能根据需求来写
数据库(suggest.mdb):
id:自动编号
keyword:关键字
seachtimes:被搜索次数
matchnum:匹配的文章数目(关于这个方面想了蛮久,如何取得文章数呢,不能是搜索时动态产生,不然在偌大数据库中查询费时费力.那么必然是在后台某个时候去其他的数据库表中添加的,原来想把这方面也做了,但限于算法的不成熟和时间的限制.所以就用了随机数来替换.)
*补充:
和google suggest还有一些差距,比如一直按着方向键问题和其他细节问题,这些都有待改进.
*效果图:




限于文章长度控制只贴首页和js代码,其他代码请在下载包中查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">  
<head> 
<meta http-equiv="Content-Type" c /> 
<title>草履虫---简易Google Suggest</title> 
  <link type="text/css" rel="stylesheet" href="suggest.css"/> 
  <script type="text/javascript" src="suggest.js"></script> 
</head> 
<body > 
  <img src="suggest.gif"  /> 
  <form action="result.asp" method="post" name="search" autocomplete="off"> 
    <input type="text" name="keyword" id="keyword"  /> 
    <input type="submit" value="手气不错"/> 
    <div id="suggest"></div> 
  </form> 
</body> 
</html>
suggest.js 
var j=-1; 
var temp_str; 
var $=function(node){ 
return document.getElementById(node); 
} 
var $$=function(node){ 
return document.getElementsByTagName(node); 
} 
function ajax_keyword(){ 
var xmlhttp; 
try{ 
  xmlhttp=new XMLHttpRequest(); 
  } 
catch(e){ 
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
  } 
xmlhttp.onreadystatechange=function(){ 
if (xmlhttp.readyState==4){ 
  if (xmlhttp.status==200){ 
   var data=xmlhttp.responseText; 
   $("suggest").innerHTML=data; 
   j=-1; 
   } 
  } 
} 
xmlhttp.open("post", "ajax_result.asp", true); 
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded'); 
xmlhttp.send("keyword="+escape($("keyword").value));  
}   
function keydeal(e){ 
var keyc; 
if(window.event){ 
  keyc=e.keyCode; 
  } 
else if(e.which){ 
  keyc=e.which; 
  } 
if(keyc!=40 && keyc!=38){ 
  ajax_keyword(); 
  temp_str=$("keyword").value; 
  } 
if(keyc==40 || keyc==38){ 
  if(keyc==40){ 
   if(j<$$("li").length){ 
    j++; 
    if(j>=$$("li").length){ 
     j=-1; 
    } 
   } 
  if(j>=$$("li").length){ 
   j=-1; 
  } 
} 
  if(keyc==38){ 
   if(j>=0){ 
    j--; 
    if(j<=-1){ 
     j=$$("li").length; 
    } 
   } 
   else{ 
    j=$$("li").length-1; 
   } 
  } 
  set_style(j); 
  if(j>=0 && j<$$("li").length){ 
   $("keyword").value=$$("li")[j].childNodes[0].nodeValue; 
   } 
  else{ 
   $("keyword").value=temp_str; 
   } 
  } 
} 
function set_style(num){ 
for(var i=0;i<$$("li").length;i++){ 
  var li_node=$$("li"); 
  li_node.className=""; 
  } 
if(j>=0 && j<$$("li").length){ 
  var i_node=$$("li")[j]; 
  $$("li")[j].className="select"; 
  } 
} 
function mo(nodevalue){ 
j=nodevalue; 
set_style(j); 
} 
function form_submit(){ 
if(j>=0 && j<$$("li").length){ 
$$("input")[0].value=$$("li")[j].childNodes[0].nodeValue; 
} 
document.search.submit(); 
} 
function hide_suggest(){ 
var nodes=document.body.childNodes 
for(var i=0;i<nodes.length;i++){ 
  if(nodes!=$("keyword")){ 
   $("suggest").innerHTML=""; 
   } 
  } 
}

打包文件下载
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航