我的漫漫程序之旅

专注于JavaWeb开发
随笔 - 39, 文章 - 310, 评论 - 411, 引用 - 0
数据加载中……

DWR实现模拟Google搜索效果

<!-- 模拟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,把这里换成你自己的实现就可以了.

完美实现google搜索效果示例源码下载

posted on 2008-01-13 13:01 々上善若水々 阅读(2449) 评论(3)  编辑  收藏 所属分类: AJAX

评论

# re: DWR实现模拟Google搜索效果[未登录]  回复  更多评论   

为什么DWRUtil未定义的?
2010-02-05 09:03 | ben

# re: DWR实现模拟Google搜索效果  回复  更多评论   

@ben
报'DWRUtil'未定义,原因:在dwr.jar中,org.directwebremoting.ui.servlet包下的util.js文件中:if (typeof window['DWRUtil'] == 'undefined') window.DWRUtil = dwr.util;该句被注释了
解决方法一是取消对该句的注释,二是在js函数加入该条语句。
2010-03-19 14:21 | chenlei65368

# re: DWR实现模拟Google搜索效果  回复  更多评论   

@chenlei65368
谢谢
2010-03-29 16:33 | supercrsky

只有注册用户登录后才能发表评论。


网站导航: