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

[summily]

郁闷了好几天，用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>

怎么解决文本框失去焦点，就隐藏下拉框啊，而且用鼠标点击下拉框的选项的时候，还要能赋值到文本框里去。

[kongxh1218]

[Quote=引用 2 楼 summily 的回复:]

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

谢谢 我这个下拉框要是想实现键盘上下键 选择呢 改怎么修改
[/Quote]

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

[kongxh1218]

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

[summily]

[Quote=引用 1 楼 kongxh1218 的回复:]
你可以这样，在textbox失去焦点的时候判断一下当前获得焦点的控件是不是下拉框，如果是
下拉框获得了焦点，也就说明是用户去点下拉框里的选项。如果不是，就隐藏。
当前获得焦点的控件可以这样得到：document.activeElement
直接与下拉框控件比较就可以了
[/Quote]
谢谢 我这个下拉框要是想实现键盘上下键 选择呢 改怎么修改

[hoojo]

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

[tanjiaoxian]

失去焦点时会隐藏掉。。所以没有执行到onclick ？

可以把onclick 尝试换成onmousedown

onmousedown后，才能抢夺焦点。。,会先执行再失去焦点。。

<div tabIndex="-1"></div>

div可以加上tabIndex让FF下支持失去焦点。。。

[chaoyan0715]

[Quote=引用 4 楼 的回复:]
失去焦点时会隐藏掉。。所以没有执行到onclick ？

可以把onclick 尝试换成onmousedown

onmousedown后，才能抢夺焦点。。,会先执行再失去焦点。。

<div tabIndex="-1"></div>

div可以加上tabIndex让FF下支持失去焦点。。。
[/Quote]
不得不说 你是人才，，，，，，， 赞一个