首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > JAVA > Java Web开发 >

ajax自动完成,该怎么处理

2012-01-09 
ajax自动完成tablestyle BORDER-COLLAPSE:collapse borderColor#111111cellSpacing0cellPadding2wi

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>

这些代码都没问题,我现在下拉中想加上用小键盘选择,代码要怎么改呢?

[解决办法]
模你键盘
http://www.webjx.com/htmldata/2005-06-29/1120003280.html
自己看看 在改一下就哦了

热点排行