日期:2014-05-16  浏览次数:20410 次

div 下拉框 自动补全 失去焦点时的问题
郁闷了好几天,用dwr做了一个自动补全,当在文本框输入数据是,用ajax去查询数据,类似google搜索框的自动补全,但出现了一个小问题,我点击文本框以外的地方(文本框失去焦点)时,下拉的div不能隐藏,文本框onblur=""去实现隐藏的话,下拉的选项一点击又赋值不到文本框里去,因为一点击下拉的选项,就等于是文本框失去焦点,失去了焦点就是隐藏下拉的选项,郁闷死了。
js文件如下
JScript code
//得到四个对象
         
        function initVars() {
          //输入文本框
          inputField = document.getElementById("salesorder_deladdress");
          //层中的表格
          nameTable = document.getElementById("name_table");
          //下拉的层
          completeDiv = document.getElementById("popup");
          //表格中的表主体
          nameTableBody = document.getElementById("name_table_body");
        }
        
        function findNames(){
            initVars();
            if(inputField.value.length > 0){
                SalesOrderEdit.getAddressName( document.getElementById("receivingunit_id").value,inputField.value,callback);
            }else{
                clearNames();
            }
        }
        // 回调函数
        function callback(the_names){
             //清除表格原有的内容
              clearNames();
              var size = the_names.length;
              if(size == 0)
              {
                  document.getElementById("popup").style.border = "none";
              }
              else
              {
              //设置表格的位置
              setOffsets();
            
              //单元格的行,列,文本节点
              var row, cell, txtNode;
              for (var i = 0; i < size; i++) {
                //名字的内容
                var nextNode = the_names[i];
                //建立一行
                row = document.createElement("tr");
                cell = document.createElement("td");
                //匿名函数
                cell.onmouseout = function() {this.className = 'mouseOver';} ;
                cell.onmouseover = function() {this.className = 'mouseOut';} ;

                
                //设置单元格的属性
                cell.setAttribute("bgcolor", "#FFFFFF");
                cell.setAttribute("border", "0");
                
                //点击,选到文本框中
                cell.onclick = function() {populateName(this);};
            
                txtNode = document.createTextNode(nextNode);
                //文本加到单元格
                cell.appendChild(txtNode);
                //单元格加到表格行
                row.appendChild(cell);
                //行加到表格
                nameTableBody.appendChild(row);
              }
              }
        }
        
        function setOffsets() {
          //文本框对象的可见宽度
          var end = inputField.offsetWidth;
          //文本框
          var left = calculateOffsetLeft(inputField);
          //层的顶部位置
          var top = calculateOffsetTop(inputField) + inputField.offsetHeight;
          //设置层的位置
          completeDiv.style.border = "black 1px solid";
          completeDiv.style.left = left + "px";
          completeDiv.style.top = top + "px";
          //表格的宽度
          nameTable.style.width = end + "px";
        }
        
        function calculateOffsetLeft(field) {
          return calculateOffset(field, "offsetLeft");
        }
        
        function calculateOffsetTop(field) {
          return calculateOffset(field, "offsetTop");
        } 
        
        //计算位置的函数:元素,属性
        function calculateOffset(field, attr) {
          var offset = 0;
          while (field) {
            //文本框[属性],这种写法得到当前元素相对于父元素的偏移值
            offset += field[attr];
            field = field.offsetParent;
          }
          return offset;
        }
          
        function populateName(cell) {
          //选中的单元格的值放到文本框中
          inputField.value = cell.firstChild.nodeValue;
          clearNames();
        }
          
        function clearNames()