"实现自动完成功能"的一个问题

Question

就像Google中已经非常熟悉自动完成功能的效果。当用户在文本框中输入待查询的商品名称时，页面中将根据用户输入的文字信息，及时给出提示列表，以帮助用户快速进行选择，  
  现在我的自动列表总是不能正常显示在输入框的正下面，请高手指教。
  表格如下：
<table  style="BORDER-COLLAPSE: collapse"  borderColor=#111111  cellSpacing=0 cellPadding=2 width=400 bgColor=#f5efe7 border=0>
    <TR>
         <TD align=middle height=4 colspan="3"><IMG height=4 
         src="images/promo_list_top.gif" width="100%" 
         border=0>
 </TD>
</TR>
<TR>
       <TD align=middle bgColor=#dbc2b0 height=19 colspan="3"><B>商品信息搜索</B>
   </TD>
</TR>
<tr>
        <td height="20">
输入品牌关键字:
</td>
<td height="20">
 <input type="text" size="15" id="names" onkeyup="findNames();" style="height:20;">
        <div style="position:absolute; id="popup"> 
            <table id="complete_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0"/>            
            <tbody id="complete_body"></tbody>
        </table>
    </div>
</td> <td height="20">
 <img src="images/search.gif" onclick="search();">
</td>
    </tr>
<tr>
<td height="20" valign="top" align="center">
产品描述:
</td>
        <td id="pos_1" height="80">
<textarea id="content">
</textarea>
</td>
    </tr>
</table>  这个div怎么才可以正常显示在下面？查到的方法如下：对field.offsetParent不是很熟？这个offsetParent指的谁？ 
//设置显示位置                
        function setOffsets_3() {
               completeTable.style.width = inputField.offsetWidth + "px";
               var left = calculateOffset_3(inputField, "offsetLeft");
               //alert("left="+left);
               var top = calculateOffset_3(inputField, "offsetTop") + inputField. offsetHeight;
               completeDiv.style.border = "black 1px solid";
               completeDiv.style.left = left + "px";
               completeDiv.style.top = top + "px";
        }
  //计算显示位置       
    function calculateOffset_3(field, attr) {
      var offset = 0;
      while(field) {
        offset += field[attr]; 
        field = field.offsetParent;
      }
      return offset;
    }

Answer 1

利用onmouseover事件或者onfoucs事件
创建一个div，然后利用ajax即使向服务器获取数据

Answer 2

我是这样做的,你试试行不
页面上创建一个div先是隐藏的.位置绝对,z-index:88;
在要显示的元素上添加函数 autoComplete(this);
function autoComplete(obj)
{

var value = obj.value;
var colName = "";
//取得提示层
var tipDiv = $("tipDiv");
//设置
var width = obj.offsetWidth;
var left = getLength(obj,"offsetLeft");
var top = getLength(obj,"offsetTop") + obj.offsetHeight;
   
tipDiv.style.top = top;
tipDiv.style.left = left;
tipDiv.style.width = width;
tipDiv.style.display = "block";
tipDiv.innerHTML = "";
tipDiv.innerHTML="<font color=red size=2>正在查询...</font>";
}
//获取对应属性的长度
function getLength(obj,attr)
{
  var offset = 0;
  var item = obj;
  while (item)
  {
      offset += item[attr];
      item = item.offsetParent;
  }
  return offset;
}

Answer 3

提示一下，使用相对地址
position:relative