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
+= ' <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)