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)