DWR实现模拟Google搜索效果实现原理及代码


Posted in Javascript onJanuary 30, 2013
<!-- 模拟google搜索 --> 
<script type="text/javascript"> 
/********************************可配置选项********************************/ 
// 被选中的相似关键字背景颜色 
var selectedBgColor = "#CCCCCC"; 
// 未被选中的相似关键字背景颜色 
var unselectedBgColor = "#FFFFFF"; 
// 相似关键字列表框的边框 
var listBorder = "1 solid #000000"; 
/***************************************************************************/ 
/********************************不可配置选项********************************/ 
// 上一次输入的关键字(用来判断关键字是否有改变,没有则不再去服务端重新获取提示关键字) 
var oldKeyValue; 
// 鼠标相对于提示关键字列表框的位置(0:提示框外面,1:提示框里面) 
var mouseLocation = 0; 
// 当前选中的提示关键字索引(从0开始,等于-1表示没有被选中项) 
var selectedKeyIndex = -1; 
// 上一次选中的提示关键字索引(从0开始,等于-1表示没有上次被选中项) 
var oldSelectedKeyIndex = -1; 
// 提示关键字总数 
var tdCount = 0; 
/***************************************************************************/ 
/* 
用途:给String对象添加去除左右空格方法 
*/ 
String.prototype.trim = function() { 
var m = this.match(/^\s*(\S+(\s+\S+)*)\s*$/); 
return (m == null) ? "" : m[1]; 
} 
/* 
用途:初始化提示关键字列表框的状态 
*/ 
function initKeyListState(){ 
selectedKeyIndex = -1; 
oldSelectedKeyIndex = -1; 
tdCount = 0; 
} 
/* 
用途:将上一次选中的关键字项变为未选中 
*/ 
function disSelectedOldKey(){ 
//判断说明:oldSelectedKeyIndex!=selectedKeyIndex 
// 当只有一个相似关键字的时候,则不存在上一次选中和这次选中关键字, 
// 只要第一次选中后,按向上或向下箭头都是选中。 
if (oldSelectedKeyIndex!=-1&&oldSelectedKeyIndex!=selectedKeyIndex){ 
$('keyId'+ oldSelectedKeyIndex).bgColor=unselectedBgColor; 
} 
// 上一次选中项更新 
oldSelectedKeyIndex = selectedKeyIndex; 
} 
/* 
用途:当按上下箭头时选中新的提示关键字项,按回车时将选中的提示关键字输入到搜索框。 
*/ 
function setSelectedKey(){ 
// $('keyId0')存在表示有相关提示关键字,不存在则不处理。 
if($('keyId0')){ 
if (event.keyCode==38){ 
//------处理向上事件------ 
if (selectedKeyIndex==-1){ 
selectedKeyIndex = tdCount-1; 
}else{ 
selectedKeyIndex= (selectedKeyIndex+tdCount-1)%tdCount; 
} 
$('keyId'+ selectedKeyIndex).bgColor= selectedBgColor; 
disSelectedOldKey(); 
}else if (event.keyCode==40){ 
//------处理向下事件------ 
if (selectedKeyIndex==-1){ 
selectedKeyIndex = 0; 
}else{ 
selectedKeyIndex = (selectedKeyIndex+1)%tdCount; 
} 
$('keyId'+ selectedKeyIndex).bgColor= selectedBgColor; 
disSelectedOldKey(); 
}else if (event.keyCode==13){ 
//------处理回车事件------ 
$('cond').value=$('keyId'+ selectedKeyIndex).innerText; 
setCursorLast($('cond')); 
// 隐藏提示关键字列表框 
$('dropdownlistDiv').style.display='none'; 
} 
} 
} 
/* 
用途:获取相似关键字 
*/ 
function getConformKey(){ 
//得到输入的关键字 
var keyValue = $('cond').value.trim(); 
// 如果这次的查询关键字和上次的一样,则不去服务器重新获取相似关键字列表。 
if (keyValue!=oldKeyValue){ 
// 关键字为空则不去服务器获取相似关键字列表 
if (keyValue==''){ 
DWRUtil.removeAllRows('showKeyList'); 
setDropListVisible(false); 
initKeyListState(); 
}else{ 
//采用ajax异步模式获取相似关键字(这里的useraction,改成自己的action) 
useraction.findByLike(keyValue,conformKeyCallback); 
} 
} 
} 
/* 
用途:获取关键字回调方法 
*/ 
function conformKeyCallback(keyList){ 
DWRUtil.removeAllRows('showKeyList'); 
initKeyListState(); 
if (keyList.length>0){ 
// 生成相似关键字提示框 
DWRUtil.addRows('showKeyList',keyList,cellFuncs, { 
cellCreator:function(options) { 
var td = document.createElement("td"); 
td.id = 'keyId' + tdCount++; 
td.onmouseover = function (){selectedKeyIndex=parseInt(this.id.substring(5,td.id.length));this.bgColor=selectedBgColor;disSelectedOldKey();}; 
td.onclick= function (){ 
$('cond').value=this.innerText; 
$('cond').focus(); 
setCursorLast($('cond')); 
$('dropdownlistDiv').style.display='none'; 
}; 
return td; 
},escapeHtml:false}); 
setDropListVisible(true); 
}else{ 
setDropListVisible(false); 
} 
} 
/* 
用途:表格数据显示处理方法 
*/ 
var cellFuncs = [ 
function(data) { return data.username; } 
]; 
/* 
用途:将输入框的光标移到最后 
*/ 
function setCursorLast(inputObj){ 
var inputRange = inputObj.createTextRange(); 
inputRange.collapse(true); 
inputRange.moveStart('character',inputObj.value.length); 
inputRange.select(); 
} 
/* 
用途:创建相似关键字列表框 
*/ 
function createShowDiv(){ 
var showDiv = document.createElement("div"); 
showDiv.id = "dropdownlistDiv"; 
with(showDiv.style){ 
position = "absolute"; 
//层的绝对位置从这调整 
left = parseInt($('cond').style.left.replace('px',''))+190; 
top = parseInt($('cond').style.top.replace('px',''))+parseInt($('cond').style.height.replace('px',''))+28; 
width = parseInt($('cond').style.width.replace('px','')); 
border = listBorder; 
zIndex = "1"; 
display='none'; 
backgroundColor = unselectedBgColor; 
} 
showDiv.onmouseover=function (){mouseLocation=1;}; 
showDiv.onmouseout=function (){mouseLocation=0;}; 
//overflow设置滚动条 
showDiv.innerHTML = "<div style='width:100%;height:150px;overflow:auto;'><table border='0' style='width: 100%;height:20%;font-size: 12;color:#33CC00;'><tbody id='showKeyList' style='margin-left: 0;margin-right: 0;margin-bottom: 0;margin-top: 0;'></tbody></table></div>"; 
document.body.appendChild(showDiv); 
initKeyListState(); 
} 
/* 
用途:设置相似关键字列表框是否可见 
参数:isDisplay,true表示可见,false表示不可见 
*/ 
function setDropListVisible(isDisplay){ 
if (mouseLocation == 1){ 
return; 
} 
if (($('cond').value.trim()!='')&&(isDisplay==true)){ 
$('dropdownlistDiv').style.display=''; 
} 
else{ 
$('dropdownlistDiv').style.display='none'; 
} 
} 
// 将创建相似关键字列表框方法附加到onload事件中 
if (window.addEventListener){ 
window.addEventListener('load', createShowDiv, false); 
}else if (window.attachEvent){ 
window.attachEvent('onload', createShowDiv); 
} 
</script>

这个js可以放在你需要实现搜索效果的jsp里,或单独保存为js文件都可以.
<div style="position:absolute;left:190px;top:25px;"> 
<input AUTOCOMPLETE="off" 
onkeydown="oldKeyValue=this.value.trim();setSelectedKey();" 
onkeyup="getConformKey();" 
onfocus="if(this.value=='找人') this.value='';setDropListVisible(true);" 
onblur="setDropListVisible(false);" 
style="width: 300; height: 23;z-index: 10;top:0;left:0;" type="text" name="cond" value="找人" id="cond" /> 
<input type="button" class="btn" value="搜一下" onclick="findBylike();" /> 
</div>

useraction.findByLike(String name);是dao层的一个查询方法,
返回一个List,把这里换成你自己的实现就可以了.
Javascript 相关文章推荐
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
JavaScript判断数字是否为质数的方法汇总
Jun 02 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 #Javascript
js判断样式className同时增加class或删除class
Jan 30 #Javascript
编写针对IE的JS代码两种编写方法
Jan 30 #Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 #Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 #Javascript
JavaScript起点(严格模式深度了解)
Jan 28 #Javascript
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 #Javascript
You might like
PHP页面中文乱码分析
2013/10/29 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
python字符串替换的2种方法
2014/11/30 Python
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
医院门卫岗位职责
2013/12/30 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
劳模事迹材料范文
2014/12/24 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python