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() { //有多少行 var ind = nameTableBody.childNodes.length; for (var i = ind - 1; i >= 0; i--) { //删除每一行 nameTableBody.removeChild(nameTableBody.childNodes[i]); } //层的外框 completeDiv.style.border = "none"; } }
html文件如下：
- HTML code
<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>
怎么解决文本框失去焦点，就隐藏下拉框啊，而且用鼠标点击下拉框的选项的时候，还要能赋值到文本框里去。
[解决办法]
你可以这样，在textbox失去焦点的时候判断一下当前获得焦点的控件是不是下拉框，如果是
下拉框获得了焦点，也就说明是用户去点下拉框里的选项。如果不是，就隐藏。
当前获得焦点的控件可以这样得到：document.activeElement
直接与下拉框控件比较就可以了
[解决办法]
- CSS code
事情焦点先隐藏再赋值应该是没有问题的为div添加键盘事件，上下键按上就选择rowIdnex - 1，向下就+1 ；且高亮选择
[解决办法]
失去焦点时会隐藏掉。。所以没有执行到onclick ？
可以把onclick 尝试换成onmousedown
onmousedown后，才能抢夺焦点。。,会先执行再失去焦点。。
<div tabIndex="-1"></div>
div可以加上tabIndex让FF下支持失去焦点。。。
[解决办法]