当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用AJAX技术做Google Suggest效果

Javascript
jquery ajax提交表单数据的两种方式
js数字输入框(包括最大值最小值限制和四舍五入)
文本框的字数限制功能jquery插件
JavaScript让IE浏览器event对象符合W3C DOM标准
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
js版扫雷实现代码 原理不错
鼠标跟随的文字变动效果
JS 判断undefined的实现代码
Ext grid 添加右击菜单
javascript或asp实现的判断身份证号码是否正确两种验证方法
javascript 获取元素位置的快速方法 getBoundingClientRect()
javascript 面向对象继承
JavaScript 地震特效
jquery.ui.progressbar 中文文档
JS 拖动效果实现代码 比较简单
JS小框架 fly javascript framework
JS在IE和FF下attachEvent,addEventListener学习笔记
js 对联广告、漂浮广告封装类（IE,FF,Opera,Safari,Chrome
js 动态选中下拉框

No. « 241 242 243 244 »

技术文章搜索

关键字

Javascript 中的 用AJAX技术做Google Suggest效果

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-13   浏览: 251 ::
收藏到网摘: n/a

原文地址: http://cceer.xmu.edu.cn/blog/view.asp?id=55

*项目名称:AJAX实现类Google Suggest效果
*作者:草履虫
*联系:[email protected]
*时间:2007-7-7
*起因:
建发实习面试时有提到这个问题,回来就考虑去实践一下,结果花了不少时间.主要是javascript在前台的表现问题,数据库结构设计等.网上有少数的几个dom教程,没有值得借鉴的地方,而<<征服Ajax web2.0开发技术详解>>中第16章 搜索提示(suggest)中那个例子实在是简陋(当然是说javascript表现部分),而且数据库用MSSQL,后台语言用JSP,和自己熟悉的格格不入(虽然都是以后要接触的),所以自己动手了.模仿效果:Google Suggest
*开发平台:Windows2003 IIS6.0 Access数据库
*工具:DreamWeaver(写ASP),Aptana(写Javascript,HTML和CSS),Emeditor(写这篇文章),Access2003(数据库)
*测试平台:Firefox2.0,IE6.0,IE7.0
*演示地址:http://finish.3322.org/suggest/index.htm(短期有效,在本机上,可能访问不顺畅)
*:文件结构:
  index.htm:首页,展现效果
  ajax_result.asp:ajax调用后台返回结果文件
  result.asp:搜索结果文件,这个我并没有做,具体功能根据需求来写
  数据库(suggest.mdb):
    id:自动编号
    keyword:关键字
    seachtimes:被搜索次数
    matchnum:匹配的文章数目(关于这个方面想了蛮久,如何取得文章数呢,不能是搜索时动态产生,不然在偌大数据库中查询费时费力.那么必然是在后台某个时候去其他的数据库表中添加的,原来想把这方面也做了,但限于算法的不成熟和时间的限制.所以就用了随机数来替换.)
*开发过程遇到问题:
  1.CSS方面:遇到了IE双倍浮动边界Bug(float:left下的margin-left是设置的两倍,用display:inline消除)
  2.javascript方面:
    一个是那个全局变量j的上下界问题着实让我乱了一会,还好理清了思路
    按键事件的兼容性问题:IE的keyCode,其他浏览器的which事件
    onkeypress和onkeyup,onkeydown事件的区别:onkeypress只接受数字和字母,不接受系统按键(如上下
方向键)
    使用submit()方法时不能定义某个标签的id或name为submit,不然将提示缺少对象
    还有一些细节判断问题,也让我费了不少神
  3.html方面:
    如何让表单不记忆(在firefox下自动记忆会挡主ajax部分,而google中就没有这样的提示功能,所以去掉了表单记忆功能),只要在form中加一个autocomplete="off"
*补充:
  和google suggest还有一些差距,比如一直按着方向键问题和其他细节问题,这些都有待改进.
*效果图:
 

限于文章长度,只帖首页和js,其他的去附件下载:
草履虫--仿googlesuggest.rar
首页:index.htm

<!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" content="text/html; charset=GB2312" />
<title>草履虫---简易Google Suggest</title>
  <link type="text/css" rel="stylesheet" href="suggest.css"/>
  <script type="text/javascript" src="suggest.js"></script>
</head>
<body onclick="hide_suggest();">
  <img src="suggest.gif" onclick="hide_suggest();" />
  <form action="result.asp" method="post" name="search" autocomplete="off">
    <!--input type="text" name="keyword" id="keyword" onkeyup="keydeal(event);" onclick="keydeal(event);"/-->
    <input type="text" name="keyword" id="keyword" onkeyup="keyupdeal(event);" onkeydown="keydowndeal(event);" onclick="keyupdeal(event);"/>
    <input type="submit" value="手气不错"/>
    <div id="suggest"></div>
  </form>
</body>
</html>
suggest.js view plaincopy to clipboardprint?
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 keyupdeal(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;  
    }  
    }  
 
function set_style(num){  
    for(var i=0;i<$$("li").length;i++){  
        var li_node=$$("li")[i];  
        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(j j++; if(j<$$(?li?).length){ if(keyc="=40" keyc="e.keyCode;" || } if(e.which){ else if(window.event){ keyc; var keydowndeal(e){ function ; $(?suggest?).innerHTML="" if(nodes[i]!='$("keyword")){'>=$$("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;  
        }  
    }  
}