模拟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{
              boProduct.getListBy(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.code+' -- '+data.name; }
    ];
   
    /**//*
        用途:将输入框的光标移到最后
    */
    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',''))+303;
           top = parseInt($('cond').style.top.replace('px',''))+parseInt($('cond').style.height.replace('px',''))+51;
           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);
    }