ajax自动完成

<table  style="BORDER-COLLAPSE: collapse" borderColor=#111111 
            cellSpacing=0 cellPadding=2 width=400 bgColor=#f5efe7 border=0>
<tr>
        <td height="20">
URL:
</td>
<td height="20">
 <input type="text" size="40" 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>
</table><script language="javascript">
    var XMLHttpReq;
    var completeDiv;
    var inputField;
    var completeTable;
    var completeBody;
  
    function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
    function findNames() {
        inputField = document.getElementById("names");            
        completeTable = document.getElementById("complete_table");
        completeDiv = document.getElementById("popup");
        completeBody = document.getElementById("complete_body");
        if (inputField.value.length > 0) {
            createXMLHttpRequest();            
            var url = "autoCompleteAjax.jsp?names=" + escape(inputField.value);  
            XMLHttpReq.open("GET", url, true);
            XMLHttpReq.onreadystatechange = callback;
            XMLHttpReq.send(null); // 发送请求
        } else {
            clearNames();
        }
    }
    function callback() {
     if (XMLHttpReq.readyState == 4) { 

if(XMLHttpReq.status==200){
                    setNames(XMLHttpReq.responseXML.getElementsByTagName("res"));
            }
        }
    }
//生成与输入内容匹配行
         function setNames(names) {            
            clearNames();
            var size = names.length;
            setOffsets();
        
            var row, cell, txtNode;
            for (var i = 0; i < size; i++) {
                var nextNode = names[i].firstChild.data;
//alert(nextNode);
                row = document.createElement("tr");
                cell = document.createElement("td");
                
                cell.onmouseout = function() {this.className='mouseOver';};
                cell.onmouseover = function() {this.className='mouseOut';};
                cell.setAttribute("bgcolor", "#FFFAFA");
                cell.setAttribute("border", "0");
                cell.onclick = function() { completeField(this); } ;                                             txtNode = document.createTextNode(nextNode);
                cell.appendChild(txtNode);
                row.appendChild(cell);
                completeBody.appendChild(row);
            }
        }
//设置显示位置                
        function setOffsets() {
            completeTable.style.width = inputField.offsetWidth; + "px";
            var left = calculateOffset(inputField, "offsetLeft");
            var top = calculateOffset(inputField, "offsetTop") + inputField.offsetHeight;
            completeDiv.style.border = "black 1px solid";
            completeDiv.style.left = left + "px";
            completeDiv.style.top = top + "px";
        }
  //计算显示位置       
    function calculateOffset(field, attr) {
      var offset = 0;
      while(field) {
        offset += field[attr]; 
        field = field.offsetParent;
      }
      return offset;
    }
//填写输入框
    function completeField(cell) {
        inputField.value = cell.firstChild.nodeValue;
        clearNames();
    }
//清除自动完成行
    function clearNames() {
        var ind = completeBody.childNodes.length;
        for (var i = ind - 1; i >= 0 ; i--) {
             completeBody.removeChild(completeBody.childNodes[i]);
        }
        completeDiv.style.border = "none";
    }
</script>这些代码都没问题，我现在下拉中想加上用小键盘选择，代码要怎么改呢？