自己写的自动完成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 = "<table cellspacing=/"0/" cellpadding=/"4/" id=/"gv_yslb/" style="/" mce_style="/""color:#333333;order-color:#404040;border-width:1px;border-style:solid;font-size:12px;border-collapse:collapse;width:100%;/" onmouseover=/"f_ClrColor(this);/">"; for (var i = nPageStart; i < nPageStart + arrayLen; i++) { ls_InnerHtml += "<tr id=/"tr" + i + "/" onmouseover=/"f_mouseOn();c=this.style.backgroundColor;this.style.backgroundColor='#99ccff';g_nCurrentTr=" + i + ";/" onmouseout=/"this.style.backgroundColor=c;f_mouseOut();/" onkeydown=/"f_onTableKeyUp();/" onclick=/"onTextSelected(this);/" style="/" mce_style="/""background-color:White;/" >"; ls_InnerHtml += "<td id=/"td" + i + "/" style="/" mce_style="/"" text-align:left;/"><span>" + g_funcMC(zzArray[i]) + "</span>"; if (g_funcHid != undefined) ls_InnerHtml += "<input type=/"hidden/" name=/"hid_zzid" + i + "/" value=/"" + g_funcHid(zzArray[i]) + "/" />"; ls_InnerHtml += "</td>"; if (g_funcBZ != undefined) ls_InnerHtml += "<td id=/"tdlx" + i + "/" style="/" mce_style="/"" text-align:right;/"><span >" + g_funcBZ(zzArray[i]) + "</span></td>"; ls_InnerHtml += "</tr>"; } if (g_isPaged == true) { ls_InnerHtml += f_pageArray(zzArray); } ls_InnerHtml += "</table>"; 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) < g_pageMax) { arrayLen = g_zzArray.length - g_pageMax * (nPageIndex - 1); } var nPageStart = (nPageIndex - 1) * g_pageMax; var ls_InnerHtml = f_createPage(nPageStart, arrayLen, zzArray); document.getElementById(g_divName).innerHTML = ls_InnerHtml; g_nCurrentTr = nPageStart; f_setCurrent();}function f_pageArray(zzArray) { var ls_InnerHtml = "<td id=/"tdPage/" style="/" mce_style="/""text-align:left;/">"; var nPageNum = zzArray.length / g_pageMax; if ((zzArray.length % g_pageMax) > 0) { nPageNum++; } for (var i = 1; i <= nPageNum; i++) { if (i != g_pageIndex) { ls_InnerHtml += " <span id=/"spanPageIndex/"" + i + " style="/" mce_style="/""text-decoration:underline;/" onmouseover=/"f_pageMouseOver(this);/" onmouseout=/"f_pageMouseOut(this);/" onclick=/"f_pageGoto(" + i + ");/">" + i + "</span> "; } else { ls_InnerHtml += " <span id=/"spanPageIndex/"" + i + " style="/" mce_style="/""text-decoration:underline; font-size:15px;font-weight:bold/" onmouseover=/"f_pageMouseOver(this);/" onmouseout=/"f_pageMouseOut(this);/" onclick=/"f_pageGoto(" + i + ");/">" + i + "</span> "; } } ls_InnerHtml += "</td>"; 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////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 

下次更新使用实例。