修复了一些细节代码(支持持续按键事件) 
*项目名称: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还有一些差距,比如一直按着方向键问题和其他细节问题,这些都有待改进.
*效果图:

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

AJAX实现仿Google Suggest效果的更多相关文章

  1. PHP实现仿Google分页效果的分页函数

    本文实例讲述了PHP实现仿Google分页效果的分页函数.分享给大家供大家参考.具体如下: /** * 分页函数 * @param int $total 总页数 * @param int $pages ...

  2. 仿Google首页搜索自动补全

    仿Google自动补全,实现细节: 后台是简单的servlet(其实就是负责后台处理数据交互的,没必要非跌用个struts...什么的) 传输介质:xml 使用jQuery js框架 功能实现: 如果 ...

  3. LoadRunner测试Google Suggest

    Google的搜索框是典型的AJAX应用,用户在输入关键字的同时,前端页面通过xmlhttp与后台服务器动态交互,根据用户输入的关键字查找匹配的内容,向用户提示建议的搜索项,也就是所谓的“google ...

  4. C#仿google日历asp.net简单三层版本

    网上搜了很多xgcalendar的例子都是Php开发的,而且官方站上的asp.net/MVC版 在vs10 08 都报错. 所以自己重新用三层写了一下希望对大家有帮助 废话不多说了 先看看它都有些什么 ...

  5. Android仿IOS回弹效果 ScrollView回弹 总结

    Android仿IOS回弹效果  ScrollView回弹 总结 应项目中的需求  须要仿IOS 下拉回弹的效果 , 我在网上搜了非常多 大多数都是拿scrollview 改吧改吧 试了一些  发现总 ...

  6. .Net 文本框实现内容提示(仿Google、Baidu)

    原文:.Net 文本框实现内容提示(仿Google.Baidu) 1.Demo下载: 文本框实现内容提示(仿Google.Baidu).rar 2.创建数据库.表(我用的sqlserver2008数据 ...

  7. 原生wcPop.js消息提示框(移动端)、内含仿微信弹窗效果

    wcPop.js移动端消息对话框插件是之前的wxPop.js的升级版,优化了js和css,并且新增了仿微信弹窗效果, 是一款含有多种情景模式的原生模态消息对话框代码,可用于替代浏览器默认的alert弹 ...

  8. EF+LINQ事物处理 C# 使用NLog记录日志入门操作 ASP.NET MVC多语言 仿微软网站效果(转) 详解C#特性和反射(一) c# API接受图片文件以Base64格式上传图片 .NET读取json数据并绑定到对象

    EF+LINQ事物处理   在使用EF的情况下,怎么进行事务的处理,来减少数据操作时的失误,比如重复插入数据等等这些问题,这都是经常会遇到的一些问题 但是如果是我有多个站点,然后存在同类型的角色去操作 ...

  9. 一款CSS3仿Google Play的垂直菜单

    之前分享过一款非常酷的CSS3垂直下拉动画菜单,是多级菜单.今天我们来看一款也是用CSS3制作的垂直菜单,是仿Google Play的菜单,菜单项都带有可爱的小图标,可以先来看看效果图: 当然你可以在 ...

随机推荐

  1. python 校招信息爬虫程序

    发现一个爬虫程序,正在学习中: https://github.com/lizherui/spider_python

  2. [div+css布局]命名规则

    //首页可能碰到的 页头:header登录条:loginBar标志:logo侧栏:sideBar广告:banner导航:nav子导航:subNav菜单:menu子菜单:subMenu搜索:search ...

  3. java 单例模式总结

    单例模式的实现方式总结: 第一种方式:同步获取实例的方法,多线程安全,懒汉模式.在调用实例的时刻初始化. public class Singleton1 { private static Single ...

  4. lvs keepalived 安装配置详解

    前段时间看了一篇文章,lvs做负载均衡根F5差不多,说实话不怎么相信,因为F5没玩过,也无法比较.F5相当的贵,真不是一般企业能负担的起的.负载均衡软件也用过不少,nginx,apache,hapro ...

  5. exception -----> Typedefs & Classes

    #include <exception> Typedefs exception_ptr 一种类型,描述了一个指向异常的指针 terminate_handler 一种类型,描述了一个适合作为 ...

  6. Beyond Compare 4

    Beyond Compare是一款不可多得的专业级的文件夹和文件对比工具.使用他可以很方便的对比出两个文件夹或者文件的不同之处.并把相差的每一个字节用颜色加以表示,查看方便.并且支持多种规则对比.

  7. sharepoint 2010 重建遇到的问题

    需要重新安装Sharepoint 2010 ,遇到问题记录下来,sharepoint中安装了热补丁和英文语言包. 卸载: 1.运行配置向导将服务器从服务场中脱离: 2.在管理中心中卸载sharepoi ...

  8. Entity Framework学习笔记(三)----CRUD(2)

    请注明转载地址:http://www.cnblogs.com/arhat 昨天晚上老魏配的机器终于到了,可是拿回来之后什么都组装好了,唯独差一个非常重要的组件"电源线",老魏那个汗 ...

  9. < java.util >-- Collection接口

    Collection:    |--List:有序(元素存入集合的顺序和取出的顺序一致),元素都有索引.元素可以重复.    |--Set:无序(存入和取出顺序有可能不一致),不可以存储重复元素.必须 ...

  10. 用vs2013编译lua源码方法

    1.下载lua源码:lua-5.2.3.tar.gz,解压 2.用vs2013建立一个win32工程: 1)下载后解压到一个目录下,这里假设解压到  F:\lua-5.2.3  注意下载的版本,如果是 ...