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

  1. var j=-1;
  2. var temp_str;
  3. var $=function(node){
  4. return document.getElementById(node);
  5. }
  6. var $$=function(node){
  7. return document.getElementsByTagName(node);
  8. }
  9. function ajax_keyword(){
  10. var xmlhttp;
  11. try{
  12. xmlhttp=new XMLHttpRequest();
  13. }
  14. catch(e){
  15. xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  16. }
  17. xmlhttp.onreadystatechange=function(){
  18. if (xmlhttp.readyState==4){
  19. if (xmlhttp.status==200){
  20. var data=xmlhttp.responseText;
  21. $("suggest").innerHTML=data;
  22. j=-1;
  23. }
  24. }
  25. }
  26. xmlhttp.open("post", "ajax_result.asp", true);
  27. xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  28. xmlhttp.send("keyword="+escape($("keyword").value));
  29. }
  30. function keydeal(e){
  31. var keyc;
  32. if(window.event){
  33. keyc=e.keyCode;
  34. }
  35. else if(e.which){
  36. keyc=e.which;
  37. }
  38. if(keyc!=40 && keyc!=38){
  39. ajax_keyword();
  40. temp_str=$("keyword").value;
  41. }
  42. if(keyc==40 || keyc==38){
  43. if(keyc==40){
  44. if(j<$$("li").length){
  45. j++;
  46. if(j>=$$("li").length){
  47. j=-1;
  48. }
  49. }
  50. if(j>=$$("li").length){
  51. j=-1;
  52. }
  53. }
  54. if(keyc==38){
  55. if(j>=0){
  56. j--;
  57. if(j<=-1){
  58. j=$$("li").length;
  59. }
  60. }
  61. else{
  62. j=$$("li").length-1;
  63. }
  64. }
  65. set_style(j);
  66. if(j>=0 && j<$$("li").length){
  67. $("keyword").value=$$("li")[j].childNodes[0].nodeValue;
  68. }
  69. else{
  70. $("keyword").value=temp_str;
  71. }
  72. }
  73. }
  74. function set_style(num){
  75. for(var i=0;i<$$("li").length;i++){
  76. var li_node=$$("li");
  77. li_node.className="";
  78. }
  79. if(j>=0 && j<$$("li").length){
  80. var i_node=$$("li")[j];
  81. $$("li")[j].className="select";
  82. }
  83. }
  84. function mo(nodevalue){
  85. j=nodevalue;
  86. set_style(j);
  87. }
  88. function form_submit(){
  89. if(j>=0 && j<$$("li").length){
  90. $$("input")[0].value=$$("li")[j].childNodes[0].nodeValue;
  91. }
  92. document.search.submit();
  93. }
  94. function hide_suggest(){
  95. var nodes=document.body.childNodes
  96. for(var i=0;i<nodes.length;i++){
  97. if(nodes!=$("keyword")){
  98. $("suggest").innerHTML="";
  99. }
  100. }
  101. }

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. DevExpress GridControl 部分用法

    1.GridControl赋值:this.GridControl1.DataSouce=dt; 2.GridContro总合计及分组合计: 常规总合计直接RunDesigner-Group Summa ...

  2. 改用二进制启动Moses translation model提示Can't read ~/working/binarised-model/reordering-table

    解决方案: 换成 /home/用户名/working 貌似就好使了...但是时间还是估计太长,明早挂机一天试试,顺便把manual 的详细部分看了

  3. System V共享内存区

    要点 shell查看命令:ipcs -m 主要函数 #include <sys/shm.h> //oflag=IPC_CREAT|IPC_EXCL|0644组合 //创建一个内存共享区 i ...

  4. 掌握这两个技术点,你可以玩转AppCan前端开发

    “AppCan的前端开发其实非常简单,只要掌握两方面的技术即可.一方面是会使用栅格布局完成UI的界面排版,另外一方面就是使用AppCan MVVM模型来完成整个页面构造和用户操作逻辑.” 在2016A ...

  5. hdu 1427 速算24点

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1427 速算24点 Description 速算24点相信绝大多数人都玩过.就是随机给你四张牌,包括A( ...

  6. UIScrowView swift

    // // ViewController.swift // UILabelTest // // Created by mac on 15/6/23. // Copyright (c) 2015年 fa ...

  7. mysql安装/启动报错汇总

    2016/9/6补充 初始化报错: # /usr/local/mysql/scripts/mysql_install_db --user=mysql --basedir=/usr/local/mysq ...

  8. Windows Phone 8 实现列表触底加载

    [背景] 很多时候在做WP开发的过程中会遇到数据需要分页获取,根据微软官方的推荐方式,建议实现为Market中类似的体验,即滑动到列表的底部的时候加载更多的数据. 这一需求在早起WP7.1时代实现起来 ...

  9. JQuery 对 Select option 的操作---转载

    <select id="selectID" > <option value="1">1</option> <optio ...

  10. xml之基础了解

    1.简介 1>什么XML语言(eXtensible Markup Language) 可扩展标记语言XML是SGML的子集,其目标是允许普通的SGML在Web上以目前HTML的方式被服务.接受和 ...