AJAX实现仿Google Suggest效果

2016-02-19 12:27 11 1 收藏

下面图老师小编跟大家分享AJAX实现仿Google Suggest效果,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~

【 tulaoshi.com - Web开发 】

修复了一些细节代码(支持持续按键事件)
*项目名称: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;inodes.length;i++){
  if(nodes!=$("keyword")){
   $("suggest").innerHTML="";
   }
  }
}

打包文件下载

来源:http://www.tulaoshi.com/n/20160219/1600912.html

延伸阅读
标签: Web开发
以下是引用片段: !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" xml:lang="zh-CN" lang="zh-CN"  head   meta name="verify-v1" content="P4T6fFCiPVxqMWZ2eztyXVzMHlnwD0wLQOq6LBHN5Y8=" /   tit...
<!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" xml:lang="zh-CN" lang="zh-CN"   <head    <meta name="ve...
标签: Web开发
     文章简介:现在.NET的Ajax组件确实不少了,微软的ajax extensions用起来很方便,一个UpdatePanel就可以搞定一切。不过,可能有些朋友更愿意自己来写。那么在.NET里,你是否知道ICallbackEventHandler呢? 现在.NET的Ajax组件确实不少了,微软的ajax extensions用起来很方便,一个UpdatePanel就可以搞定一切。不过...
标签: Web开发
     发出异步请求并不意味着只是与您自己的服务器端程序交互。其实也可以与一些公共 API,例如来自 Google 或 Amazon 的 API 进行通信,从而为 Web 应用程序增加您自己的脚本和服务器端程序所不能提供的更多功能。在本文中,Brett McLaughlin 教您如何向公共 API,例如 Google 提供的 API 发出请求并接收其响应。 ...
标签: Web开发
一.首先来看一下什么是suggest framework Suggest Framework 故名思意,就是仿 Google Suggest 的一个小框架,让你的文本框也有提示功能。利用suggest framework你可以在自己的网站上很轻松实现“输入提示”效果,这种效果会很大程度上提高用户体验,提高搜索效率。 一个页面上可以出现多个搜索框,每个搜索框都可以实现单独配置。 此框架无...

经验教程

360

收藏

94
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部