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 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
理解Javascript的call、apply
Dec 16 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
vue通过watch对input做字数限定的方法
Jul 13 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
js实现通过开始结束控制的计时器
Feb 25 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中echo,print_r与var_dump区别分析
2014/09/29 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
JS查看对象功能代码
2008/04/25 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
2017/01/04 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
Vue实现简单分页器
2018/12/29 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python中关键字is与==的区别简述
2014/07/31 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
Python安装whl文件过程图解
2020/02/18 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
什么是岗位职责
2013/11/12 职场文书
公关活动策划方案
2014/05/25 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
入伍通知书
2015/04/23 职场文书
python简单验证码识别的实现过程
2021/06/20 Python
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS