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

Javascript
javascript 新浪背投广告实现代码
javascript 选择文件夹对话框(web)
JS 自动完成 AutoComplete(Ajax 查询)
javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解
jQuery 插件开发 其实很简单
最简单的jQuery程序 入门者学习
javascript 读取xml,写入xml 实现代码
JQuery 实现的页面滚动时浮动窗口控件
javascript 动态加载 css 方法总结
javascript 表格左右收缩
jqurey 学习笔记 传智博客佟老师附详细注释
javascript dom 操作详解 js加强
JS 动态添加列表框项效果代码
Javascript 事件流和事件绑定
Google Map Api和GOOGLE Search Api整合实现代码
9个javascript语法高亮插件 推荐
Prototype String对象 学习
javascript ImgBox透明遮罩层背景图片展示
javascript FAQ函数(提问+回复)
jQuery TextBox自动完成条

No. « 222 223 224 225 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-13   浏览: 320 ::
收藏到网摘: 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;  
        }  
    }  
}