Javascript使用AjaxPro构建自动补全，同时自动生成待输行【原创】

 这个小功能可是搞的我头痛，javascript不是我的强项，不过凭借我坚持不懈的精神（小吹下）终于成功实现了此功能，具体介绍下，主要实现的功能是点击文本框的时候有自动补全提示，当文本改变的时候，这里注意了，这个事件并不是onchange，具体实现大家代码里看，当文本框不为空的时候会自动生成一行待输的tr，其他的功能我这里就不介绍了，大家代码里看，如有不清楚的地方请留言。和大家分享下代码：

 

Author:myssh

                        var ipd = null;
            var div = null;
            function OnFouce(inputID,CategoryTree,responses)        
            {
                ipd = inputID;
                inputID.attachEvent('onpropertychange',function(o){
                if(o.propertyName!='value')return;
                ExpandSubCategory(inputID);});
               
                var table_0 = document.createElement("table");
                var tbody_0 = document.createElement("tbody");
                var ddv = document.getElementById(CategoryTree);
                ddv.style.width = ipd.clientWidth||ipd.offsetWidth+"px";
                div = ddv;
                table_0.setAttribute("width","100%");
                if(responses != null){
                for( var i = 0; i < responses.length; i++ )
                {
                var tr_0 = document.createElement("tr");
                var td_0 = document.createElement("td");
                td_0.style.width = inputID.parentNode.style.width;
                var obj = responses[i];
                var a = document.createElement("a");
                a.id = "a_" + obj[0];
                a.innerHTML = obj[1]; 
                a.href = "javascript:OpenDocument('" + obj +"'," + CategoryTree + ");";                        
                td_0.appendChild(a);
                tr_0.appendChild(td_0);
                tbody_0.appendChild(tr_0);
               }
               }
               else
               {
                var tr_0 = document.createElement("tr");
                var td_0 = document.createElement("td");
                td_0.innerHTML = "<h3>暂无信息</h3>";
                tr_0.appendChild(td_0);
                tbody_0.appendChild(tr_0);
               }
                var tr_0 = document.createElement("tr");
                var td_0 = document.createElement("td");
                var hr = document.createElement("hr");
                hr.size="2px";
                td_0.appendChild(hr);
                tr_0.appendChild(td_0);
                tbody_0.appendChild(tr_0);
               
                var tr_1 = document.createElement("tr");
                var td_1 = document.createElement("td");
                var a = document.createElement("a");
                a.href = "javascript:divNone()";
                a.innerHTML = "【关闭】"; 
                a.onclick=function(){}
                td_1.appendChild(a);
                tr_1.appendChild(td_1);
                tbody_0.appendChild(tr_1);
                   
                table_0.appendChild(tbody_0);
                ddv.innerHTML = "<table>" + table_0.innerHTML + "</table>"; 
               
                var t = inputID.offsetTop;  
                var l = inputID.offsetLeft;  
                while(inputID = inputID.offsetParent)
                {  
                    t+=inputID.offsetTop;  
                    l+=inputID.offsetLeft;
                }
                ddv.style.left = l;
                ddv.style.top = t + ipd.offsetHeight;
                ddv.style.display="block";
                ddv.onmouseover=function(){clearTimeout(timer)}
          inputID.onmouseout=function(){Mout()}

            }
            function OpenDocument(pronameInfo,CategoryTree)
            {  
                var ddv = document.getElementById(CategoryTree);
                var pro = pronameInfo.split(",");
                var proTable = document.getElementById("proTable");
                var rowsCount = proTable.rows.length;
                var curRowsindex = ipd.parentNode.parentNode.rowIndex;
                var cellIndex = proTable.rows[curRowsindex].cells.length;
                var curRow = proTable.rows[curRowsindex];
                var rowHtml = proTable.rows[curRowsindex].cloneNode(true);
                for(var i=0;i<cellIndex;i++)
                {
                  if(pro.length  > i)
                  {
                    if(pro[i] != undefined && pro[i] != "")
                    {
                        if(i != 0)
                        {
                            if(i == 1)
                                curRow.cells[i].firstChild.value = pro[i];
                            else
                                curRow.cells[i].innerHTML = pro[i];   
                        }
                        else
                        {
                            curRow.cells[i].innerHTML = "";
                            curRow.cells[i].innerHTML += "<input type='hidden' value='"+pro[i]+"'>";
                            curRow.cells[i].innerHTML += curRowsindex;
                            curRow.cells[i].innerHTML
                            += '&nbsp;<a href="javascript:delRow(proTable,'+curRowsindex+')">删除</a>';
                        }
                    }
                  }
                }
               div.style.display="none";
               var nullCount = 0;
               while(rowsCount--)
               {
                if(rowsCount != 0)
                {
                    var iobj = proTable.rows[rowsCount].cells[1].firstChild;
                    if(iobj == null || iobj.value == "") nullCount++;
                  }
                }
                if(nullCount>0)return;
                curRow.parentNode.insertBefore(rowHtml); 
            }

           var timer;
           function Mout()
           {
            timer = setTimeout(function(){div.style.display="none";},1000);
           }
           function divNone()
           {
            div.style.display="none";
           }
          
           function cellIndex(thisID)
           {
            thisID.innerHTML = thisID.parentNode.rowIndex;
           }
          
           function delRow(curTable,rowIndex)
           {
          
            if(rowIndex == 1)
            {
               var inputObj = curTable.rows[rowIndex].getElementsByTagName("input");
               var selectObj = curTable.rows[rowIndex].getElementsByTagName("select");
              
               if(inputObj !=null && inputObj != null)
               {
                var countIn = inputObj.length;
                while(countIn--)
                {
                    inputObj[countIn].value = "" ;
                }
                count = selectObj.length;
               }
              
                if(selectObj !=null && selectObj != null)
               {
                var countIn = selectObj.length;
                while(countIn--)
                {
                    selectObj[countIn].value = "";
                }
               }
               curTable.rows[rowIndex].cells[0].innerHTML = "";
               if(curTable.rows[rowIndex+1] != undefined)
               curTable.deleteRow(rowIndex+1);
            }
            else
            {
                curTable.deleteRow(rowIndex);
            }
           }

总结：这里注释没有写，呵呵，由于改动比较平凡，而且公司里赶项目，这里就不写了

 

4月15日：我又更新了下，功能完善了不少（myssh）

4月22日：现在终于有点满意了，呵呵.....(myssh)