DWR实现模拟Google搜索效果

发布时间：2020-12-15 22:10:08 所属栏目：百科来源：网络整理

导读：[html] view plain copy !--模拟google搜索-- script type = "text/javascript" /********************************可配置选项********************************/ //被选中的相似关键字背景颜色 var selectedBgColor = "#CCCCCC" ; //未被选中的相似关键字背

[html] 
   view plain 
   copy 
    
   
 <!--模拟google搜索-->
 <scripttype="text/javascript">
 /********************************可配置选项********************************/
 //被选中的相似关键字背景颜色
 varselectedBgColor="#CCCCCC";
 //未被选中的相似关键字背景颜色
 varunselectedBgColor="#FFFFFF";
 //相似关键字列表框的边框
 varlistBorder="1solid#000000";
 /***************************************************************************/
 
 /********************************不可配置选项********************************/
 //上一次输入的关键字（用来判断关键字是否有改变，没有则不再去服务端重新获取提示关键字）
 varoldKeyValue;
 //鼠标相对于提示关键字列表框的位置（0：提示框外面，1：提示框里面）
 varmouseLocation=0;
 //当前选中的提示关键字索引（从0开始，等于-1表示没有被选中项）
 varselectedKeyIndex=-1;
 //上一次选中的提示关键字索引（从0开始，等于-1表示没有上次被选中项）
 varoldSelectedKeyIndex=-1;
 //提示关键字总数
 vartdCount=0;
 
 /***************************************************************************/
 /*
 用途：给String对象添加去除左右空格方法
 */
 String.prototype.trim=function(){
 varm=this.match(/^s*(S+(s+S+)*)s*$/);
 return(m==null)?"":m[1];
 }
 用途:初始化提示关键字列表框的状态
 functioninitKeyListState(){
 selectedKeyIndex=-1;
 oldSelectedKeyIndex=-1;
 tdCount=0;
 }
 /*
 用途:将上一次选中的关键字项变为未选中
 */
 functiondisSelectedOldKey(){
 //判断说明：oldSelectedKeyIndex!=selectedKeyIndex
 //当只有一个相似关键字的时候，则不存在上一次选中和这次选中关键字，
 //只要第一次选中后，按向上或向下箭头都是选中。
 if(oldSelectedKeyIndex!=-1&&oldSelectedKeyIndex!=selectedKeyIndex){
 $('keyId'+oldSelectedKeyIndex).bgColor=unselectedBgColor;
 //上一次选中项更新
 oldSelectedKeyIndex=selectedKeyIndex;
 用途:当按上下箭头时选中新的提示关键字项，按回车时将选中的提示关键字输入到搜索框。
 functionsetSelectedKey(){
 //$('keyId0')存在表示有相关提示关键字，不存在则不处理。
 if($('keyId0')){
 if(event.keyCode==38){
 //------处理向上事件------
 if(selectedKeyIndex==-1){
 selectedKeyIndex=tdCount-1;
 }else{
 selectedKeyIndex=(selectedKeyIndex+tdCount-1)%tdCount;
 $('keyId'+selectedKeyIndex).bgColor=selectedBgColor;
 disSelectedOldKey();
 }elseif(event.keyCode==40){
 //------处理向下事件------
 if(selectedKeyIndex==-1){
 selectedKeyIndex=0;
 }else{
 selectedKeyIndex=(selectedKeyIndex+1)%tdCount;
 $('keyId'+selectedKeyIndex).bgColor=selectedBgColor;
 disSelectedOldKey();
 }elseif(event.keyCode==13){
 //------处理回车事件------
 $('cond').value=$('keyId'+selectedKeyIndex).innerText;
 setCursorLast($('cond'));
 //隐藏提示关键字列表框
 $('dropdownlistDiv').style.display='none';
 用途:获取相似关键字
 functiongetConformKey(){
 //得到输入的关键字
 varkeyValue=$('cond').value.trim();
 //如果这次的查询关键字和上次的一样，则不去服务器重新获取相似关键字列表。
 if(keyValue!=oldKeyValue){
 //关键字为空则不去服务器获取相似关键字列表
 if(keyValue==''){
 DWRUtil.removeAllRows('showKeyList');
 setDropListVisible(false);
 initKeyListState();
 //采用ajax异步模式获取相似关键字(这里的useraction,改成自己的action)
 useraction.findByLike(keyValue,conformKeyCallback);
 用途:获取关键字回调方法
 functionconformKeyCallback(keyList){
 initKeyListState();
 if(keyList.length>0){
 //生成相似关键字提示框
 DWRUtil.addRows('showKeyList',keyList,cellFuncs,{
 cellCreator:function(options){
 vartd=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'));
 };
 returntd;
 },escapeHtml:false});
 setDropListVisible(true);
 用途:表格数据显示处理方法
 varcellFuncs=[
 function(data){returndata.username;}
 ];
 用途:将输入框的光标移到最后
 functionsetCursorLast(inputObj){
 varinputRange=inputObj.createTextRange();
 inputRange.collapse(true);
 inputRange.moveStart('character',inputObj.value.length);
 inputRange.select();
 用途:创建相似关键字列表框
 functioncreateShowDiv(){
 varshowDiv=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="<divstyle='width:100%;height:150px;overflow:auto;'><tableborder='0'style='width:100%;height:20%;font-size:12;color:#33CC00;'><tbodyid='showKeyList'style='margin-left:0;margin-right:0;margin-bottom:0;margin-top:0;'></tbody></table></div>";
 document.body.appendChild(showDiv);
 用途:设置相似关键字列表框是否可见
 参数：isDisplay，true表示可见，false表示不可见
 functionsetDropListVisible(isDisplay){
 if(mouseLocation==1){
 return;
 if(($('cond').value.trim()!='')&&(isDisplay==true)){
 $('dropdownlistDiv').style.display='';
 else{
 //将创建相似关键字列表框方法附加到onload事件中
 if(window.addEventListener){
 window.addEventListener('load',createShowDiv,false);
 }elseif(window.attachEvent){
 window.attachEvent('onload',createShowDiv);
 </script>

这个js可以放在你需要实现搜索效果的jsp里,或单独保存为js文件都可以.

copy 
    
   

style

"position:absolute;left:190px;top:25px;"

inputAUTOCOMPLETE="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"/>
inputtype="button"class="btn"value="搜一下"onclick="findBylike();"/>
div>

useraction.findByLike(String name);是dao层的一个查询方法,
返回一个List,把这里换成你自己的实现就可以了.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!