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

Javascript
javascript 面向对象的经典实例代码
javascript prototype原型操作笔记
JavaScript 常见对象类创建代码与优缺点分析
javascript 混合的构造函数和原型方式，动态原型方式
测试JavaScript字符串处理性能的代码
JQuery 表单中textarea字数限制实现代码
jQuery Selectors(选择器)的使用(六、属性篇)
IE浏览器打印的页眉页脚设置解决方法
javascript检测(控制 )上传文件大小
jquery 双色表格实现代码
JavaScript Cookie的读取和写入函数
JavaScript 利用Cookie记录用户登录信息
JavaScript Cookie显示用户上次访问的时间和次数
JavaScript Cookie 直接浏览网站分网址
javascript OFFICE控件测试代码
javascript setTimeout和setInterval 的区别
javascript弹出窗口 window.open使用方法以及参数说明分析篇
可以用来搜索当前页面内容的js代码
动态调整textarea中字体的大小代码
为指定元素增加样式的js代码

No. « 246 247 248 249 »

技术文章搜索

关键字

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

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