div 下拉框 自动补全 失去焦点时的问题

Question

郁闷了好几天，用dwr做了一个自动补全，当在文本框输入数据是，用ajax去查询数据，类似google搜索框的自动补全，但出现了一个小问题，我点击文本框以外的地方（文本框失去焦点）时，下拉的div不能隐藏，文本框onblur=""去实现隐藏的话，下拉的选项一点击又赋值不到文本框里去，因为一点击下拉的选项，就等于是文本框失去焦点，失去了焦点就是隐藏下拉的选项，郁闷死了。
js文件如下
//得到四个对象
      
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() {
  //有多少行
  var ind = nameTableBody.childNodes.length;
  for (var i = ind - 1; i >= 0; i--) {
    //删除每一行
    nameTableBody.removeChild(nameTableBody.childNodes[i]);
  }
  //层的外框
  completeDiv.style.border = "none";
}
}
html文件如下：
<tr><td align="left" width="100%" colspan="2"><label>送货地址<span class="small">最长100•必填</span></label><html:text property="salesorder_deladdress" size="20" styleClass="required max-length-100" styleId="salesorder_deladdress" onkeyup="findNames();"  /></td></tr>
        <tr><td><div style="position:absolute; " id="popup">
                    <div align="left">
                    <table id="name_table" bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0" >
                    <tbody id="name_table_body" class="westFont" >
                    </tbody>
                    </table>
                    </div>
               </div>
        </td></tr>怎么解决文本框失去焦点，就隐藏下拉框啊，而且用鼠标点击下拉框的选项的时候，还要能赋值到文本框里去。

Answer 1

你可以这样，在textbox失去焦点的时候判断一下当前获得焦点的控件是不是下拉框，如果是
下拉框获得了焦点，也就说明是用户去点下拉框里的选项。如果不是，就隐藏。
当前获得焦点的控件可以这样得到：document.activeElement
直接与下拉框控件比较就可以了

Answer 2

事情焦点先隐藏再赋值应该是没有问题的
为div添加键盘事件，上下键
按上就选择rowIdnex - 1，向下就+1 ；且高亮选择

Answer 3

失去焦点时会隐藏掉。。所以没有执行到onclick  ？可以把onclick 尝试换成onmousedown  onmousedown后，才能抢夺焦点。。,会先执行再失去焦点。。<div tabIndex="-1"></div>div可以加上tabIndex让FF下支持失去焦点

Answer 4

实现键盘上下键功能也很简单，在input中加上onkeyup事件，在这个事件里判断
如果event.keyCode = 38，表示向上，40表示向下，再将下拉框的当前选中的值
做相应的调整就可以了。select标签有selectedIndex属性，将这个值+1或者-1就
会实现你要的效果，不过要先判断一下是否当前被选中的已经在第一个或者最后
一个