项目名称:AJAX实现类Google Suggest效果
作者:草履虫
联系:caolvchong@gmail.com
时间: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://cceer.xmu.edu.cn/blog/post/googlesuggest.html
文件结构: 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代码,suggest.js:
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;
}
}
}
分享到:
相关推荐
AJAX实现类Google Suggest效果 *测试平台:Firefox2.0,IE6.0,IE7.0 *演示地址:http://www.okajax.com/demo/suggest/ *:文件结构: index.htm:首页,展现效果 ajax_result.asp:ajax调用后台返回结果文件 result.asp:...
servlet+ajax搜索提示。 仿Google Suggest,使用ajax技术实现动态获取搜索提示的功能,当输入搜索关键字时,自动向服务器发送请求,查询相关的关键字,并及时提示用户可输入的关键字。
Ajax仿Google Suggest搜索提示,ASP+Access数据库版,这里没有用到任何的AJAX框架,完全自已写的AJAX提示功能。
实现了类似google的搜索提示效果。
Google公司推出的Google suggest服务可实现简单的搜索功能,当在搜索框中输入要搜索的词时,Google会给出一些相关搜索词的提示,然后可以通过光标移动来定位,同时还会统计相应结果的数量,这便是通过Ajax实现的。...
VS2005 用Ajax实现无刷新技术和输入前提示!即:Google Suggest
ajax实现输入提示(类似百度和Google的输入提示) 用法非常简单: 1、在jsp页面引入autosuggest.js文件 2、建一个text文本框 3、写js代码: <script> new actb("tb", loadAllMessage("suggest" , ""), null); 4、这...
该脚本功能很强大,类似google的自动完成。 使用了cache 功能,当敲入的字符数可以在cache中查到时,将不会向服务器发送请求。减轻服务器压力 使用空格匹配,一个空格字符相当于1个或多个字符(串),可以自己写简单...
文本框Input文字自动完成Suggest提示插件,一款Suggest搜索提示插件,暗藏有淘宝首页、有啊首页、Google搜索首页、来点广告搜索的众多下拉提示,实际上演示效果与其真实网站上的相关无几,使用了Yahoo网站的一个搜索...
相当于谷歌的模糊搜索,用javascript 结全 ajax 组合成的技术
控件介绍:仿google自动提示文本框,本控件也是通过ClientScript.GetCallbackEventReference实现ajax获取数据。控件继承了原来的TextBox控件,并在其基础上添加了触发事件用于获取匹配数据。另外控件加入了Cache缓存...
前段时间想用google suggest在网上找了很多都不尽人意,于是自己花了些时间写了一个,跟google suggest 基本一样,后面的约多少结果非本程序范围哦。
运用了多种技术(ajax+js+dom+json+php+mysql)写出的仿百度、谷歌的智能提示效果,很简单,很实用
仿GOOGLE下拉提示框方法: 后台数据以 [['关键字符','估计数量'], ['关键字符','估计数量'], ...] 格式输出。 页面onload后调用(因为有body.appendChild方法) var mySuggest = new hansir.TextSuggest(); my...
Ajax模仿google提示输入框 使用说明 v1.8 本程序由飞飞asp乐园编写 ************************************************* 特别感谢: 一杯白开水 网友 的帮助 版本所提的修改建议 *********************************...
内容索引:脚本资源,Ajax/JavaScript,输入提示 一款Suggest搜索提示插件,暗藏有淘宝首页、有啊首页、Google搜索首页、来点广告搜索的众多下拉提示,实际上演示效果与其真实网站上的相关无几,使用了Yahoo网站的一个...
此小程序是模仿Google输入提示框所编写 亦可用于用户注册邮箱时的提示 此程序使用方便简单、易用灵活 且不限Asp、php、net 文件使用说明: 在需要使用的页面首先要引用2个js文件 <script src="jquery1.2.3.min.js">...
1.本书1~16章所附代码的运行环境 ...程序描述:本章将仿照Google Suggest,使用Ajax技术实现动态获取搜索提示的功能。当输入搜索关键字时,自动向服务器发送请求,查询相关的关键字,并及时提示用户可输入的关键字。 ...