自己写的自动完成js插件源码

　　经测试，此插件兼容ie，chrome，firefox。 //autocomplete 0.2 ////////////////////////////////////////////////// /////////////////////////////////////////////////// //////////////////////// var g_divName = undefined; var g_ajaxFunc = undefined; var g_tbx = undefined; var g_hid = undefined; var g_funcMC = undefined; var g_funcHid = undefined; var g_funcBZ = undefined; var g_isInited = false; var g_zzArray; var g_isPaged = false; var g_pageMax = 10; var g_pageIndex = 1; //public////////////////////////////////////////// /////////////////////////////////////////////////// ///////////// //ajaxFunc:用于返回数组的ajax函数； //tbx:用于存放选中的内容的textbox的id； //hid:用于存放选中的隐藏属性的hidden的id； //funcMC(item):用于返回MC的函数； //funcHid(item):用于返回HID的函数； //funcBZ(item):用于返回BZ的函数； //divName:用于列出autoComplete的list的id； function onInitAutoComplete(ajaxFunc, tbx, hid, funcMC, funcHid, funcBZ, divList) { var tbTerm = document.getElementById(tbx); if (tbTerm == undefined) { return; } if (tbTerm.attachEvent) { tbTerm.attachEvent("onkeyup", onTextChange_ex); } else if (tbTerm.addEventListener) { tbTerm.addEventListener("keyup", onTextChange_ex, false); } g_ajaxFunc = ajaxFunc; g_tbx = tbx; g_hid = hid; g_funcMC = funcMC; g_funcHid = funcHid; g_funcBZ = funcBZ; g_isInited = true; if (arguments[6] == undefined) { g_divName = 'div_AutoComplete_list_wyyy'; var br = document.createElement("br"); var divList = document.createElement("DIV"); divList.id = g_divName; divList.style.zIndex = "10"; divList.style.textAlign = "left"; divList.style.position = "absolute"; divList.style.width = parseInt(tbTerm.style.width) + 7 + "px"; var praentElement = tbTerm.parentElement || tbTerm.parentNode; praentElement.appendChild(br); praentElement.appendChild(divList); document.getElementById(g_divName).style.display = ""; } else if (arguments[6] != undefined) { g_divName = divList; } } function setPageSize(pageSize) { g_pageMax = pageSize } function setListWidth(nWidth) { var divList = document.getElementById(g_divName); divList.style.width = nWidth; } function onTextChange_ex() { var tbx = document.getElementById(g_tbx); onTextChange(tbx); } function onTextChange(oText) { if (g_isInited == false) return; if (oText.value == null || oText.value == "") { document.getElementById(g_divName).innerHTML = ""; return; } var event = arguments[0] || window.event; var ls_keycode = event.keyCode || event.charCode; if (ls_keycode != 40 && ls_keycode != 38 && ls_keycode != 13) g_ajaxFunc(oText.value, f_createItemList); } //private///////////////////////////////////////// //////////////////////////////////////// function f_clrCurrent() { var ls_TRName = "tr" + g_nCurrentTr; var trObj = document.getElementById(ls_TRName); if (trObj != undefined) { f_ClrColor(trObj); } } function f_setCurrent() { var ls_TRName = "tr" + g_nCurrentTr; var trObj = document.getElementById(ls_TRName); if (trObj != undefined) { f_SetColor(trObj); } } function f_createItemList(ls_zzArray) { g_pageIndex = 1; g_zzArray = ls_zzArray; g_isPaged = false; var zzArray = ls_zzArray; var arrayLen = zzArray.length; if (arrayLen > g_pageMax) { arrayLen = g_pageMax; g_isPaged = true; } var ls_InnerHtml = f_createPage(0, arrayLen, zzArray); document.getElementById(g_divName).innerHTML = ls_InnerHtml; g_nCurrentTr = 0; f_setCurrent(); } //开始位置，长度，症状数组 function f_createPage(nPageStart, arrayLen, zzArray) { var ls_InnerHtml = ""; for (var i = nPageStart; i "; ls_InnerHtml += "" + g_funcMC(zzArray[i]) + ""; if (g_funcHid != undefined) ls_InnerHtml += ""; ls_InnerHtml += ""; if (g_funcBZ != undefined) ls_InnerHtml += "" + g_funcBZ(zzArray[i]) + ""; ls_InnerHtml += ""; } if (g_isPaged == true) { ls_InnerHtml += f_pageArray(zzArray); } ls_InnerHtml += ""; return ls_InnerHtml; } function f_pageGoto(nPageIndex) { g_pageIndex = nPageIndex; var zzArray = g_zzArray; var arrayLen = g_pageMax; if (g_zzArray.length - g_pageMax * (nPageIndex - 1) "; var nPageNum = zzArray.length / g_pageMax; if ((zzArray.length % g_pageMax) > 0) { nPageNum++; } for (var i = 1; i " + i + " "; } else { ls_InnerHtml += " " + i + " "; } } ls_InnerHtml += ""; return ls_InnerHtml; } function f_pageMouseOver(obj) { obj.style.cursor = "hand"; } function f_pageMouseOut(obj) { obj.style.cursor = "normal"; } var g_nOldColor; var g_nCurrentTr = 0; function f_SetColor(Obj) { g_nOldColor = Obj.style.backgroundColor; Obj.style.backgroundColor = "#99ccff"; } function f_ClrColor(Obj) { Obj.style.backgroundColor = g_nOldColor; } var g_isMouseOn = false; function f_mouseOn() { f_clrCurrent(); g_isMouseOn = true; } function f_mouseOut() { f_setCurrent(); g_isMouseOn = false; } function onTextSelected(obj) { var ls_idName = obj.id; var rowID = ls_idName.substr(2); ls_idName = "td" + rowID; var obj = document.getElementById(ls_idName); var obj2 = obj.childNodes[1].value; if (document.getElementById(g_hid) != undefined) document.getElementById(g_hid).value = obj2; var tbx_zz = document.getElementById(g_tbx); if (tbx_zz != undefined) { tbx_zz.value = obj.innerText || obj.textContent; tbx_zz.focus(); } document.getElementById(g_divName).innerHTML = ""; g_nCurrentTr = -1; g_isMouseOn = false; if (tbx_zz != undefined) { tbx_zz.focus(); } } document.onkeydown = function() { var event = arguments[0] || window.event; var ls_keycode = event.keyCode || event.charCode; switch (ls_keycode) { case 40: //down if (g_isMouseOn == true) return; var ls_TRNamePre = "tr" + g_nCurrentTr; var trObjPre = document.getElementById(ls_TRNamePre); if (trObjPre != undefined) { f_ClrColor(trObjPre); } g_nCurrentTr++; var ls_TRName = "tr" + g_nCurrentTr; var trObj = document.getElementById(ls_TRName); if (trObj != undefined) { f_SetColor(trObj); } else { g_nCurrentTr--; ls_TRName = "tr" + g_nCurrentTr; trObj = document.getElementById(ls_TRName); if (trObj != undefined) { f_SetColor(trObj); } } return false; case 38: //up if (g_isMouseOn == true) return; var ls_TRNamePre = "tr" + g_nCurrentTr; var trObjPre = document.getElementById(ls_TRNamePre); if (trObjPre != undefined) { f_ClrColor(trObjPre); } g_nCurrentTr--; var ls_TRName = "tr" + g_nCurrentTr; var trObj = document.getElementById(ls_TRName); if (trObj != undefined) { f_SetColor(trObj); } else { g_nCurrentTr++; ls_TRName = "tr" + g_nCurrentTr; trObj = document.getElementById(ls_TRName); if (trObj != undefined) { f_SetColor(trObj); } } return false; case 13: //enter ls_idName = "td" + g_nCurrentTr; var obj = document.getElementById(ls_idName); var obj2 = ""; if (obj != undefined) { obj2 = obj.childNodes[1].value; var tbx = document.getElementById(g_tbx) if (tbx != undefined) tbx.value = obj.innerText || obj.textContent; } if (document.getElementById(g_hid) != undefined) document.getElementById(g_hid).value = obj2; document.getElementById(g_divName).innerHTML = ""; g_nCurrentTr = -1; return false; case 27: //esc document.getElementById(g_divName).innerHTML = ""; break; default: break; } return true; } //end of autocomplete ////////////////////////////////////////////////// /////////////////////////////////////////////////// /////////////////////////////  下次更新使用实例。