V0.1(2006-11-10) 纯JS,无须再加CSS 支持键盘鼠标 仅IE6+ V0.2(2006-11-16) 修复了多个控件的下拉不隐藏的BUG 修改下拉背景的透明问题 < HTML > < HEAD > < TITLE > AutoComplete </ TITLE > < META NAME ="Generator" CONTENT ="EditPlus" > < META NAME ="Author" CONTENT ="" > < META NAME ="Keywords" CONTENT ="" > < META NAME ="Description" CONTENT ="" > </ HEAD > < SCRIPT LANGUAGE ="JavaScript" > <!--/**//** ** ================================================================================================== ** ClassName :CLASS_MSN_MESSAGE ** Intro :a control similar IE Address Bar ** Example : Ver : 0.2 --------------------------------------------------------------------------------------------------- nick:<INPUT size=30 name=q autolist='ba|ttyp|"|tt|typ|中国上海市|www.baidu.com|www.google.con|jimao8|中国|中|中国上海'> <SCRIPT LANGUAGE="JavaScript"> <!-- var acbar = new CLASS_AUOTCOMPLETE(); acbar.setup(document.all.q); //--> < /SCRIPT> --------------------------------------------------------------------------------------------------- ** Author :ttyp ** Email :ttyp@21cn.com ** Date :2006-11-16 ** ================================================================================================== **/ function CLASS_AUOTCOMPLETE(ID){ var me = this; this.contain = document.getElementById("__auto_complete_contain"); this.handle = null; this.dropdown = false; this.stopChange = false; this.line = 0; this.selectIndex = -1; this.id = ""; if(ID!=null&&typeof(ID)!=undefined){ this.id = ID; }else{ this.id = getNewId(); } function getNewId(){ return "ID_" + Math.random().toString().substring(2) } this.show = function(flag){ var contain = me.contain; if(contain==null||typeof(contain)=="undefined"){ contain = document.createElement("div"); var body = document.body; if(typeof(body)!="undefined"){ body.appendChild(contain); } me.contain = contain; } if(flag==undefined||flag==null){ flag = true; } if(flag){ var w=1000,h=50,l,t; me.line = 0; if(me.handle!=null&&typeof(me.handle)!="undefined"){ var v = me.handle.value; if(me.list!=null&&typeof(me.list)!="undefined"){ for(var i=contain.childNodes.length-1;i>=0;i--){ contain.removeChild(contain.childNodes[i]); } for(var i=0;i<me.list.length;i++){ if(me.list[i].indexOf(v)==0){ var oo = document.createElement("div"); contain.appendChild(oo); oo.innerText = me.list[i]; oo.style.height = "16px"; oo.style.width = "100%"; oo.style.overflow="hidden"; oo.style.lineHeight="120%"; oo.style.cursor = "hand"; oo.style.fontSize = "9pt"; oo.style.padding = "0 2 0 2"; oo.setAttribute("accoc",me.id + "__auto_complete_contain"); oo.onmouseover = function(){ this.style.background = "highlight"; this.style.color = "highlighttext"; if(me.selectIndex>=0){ var oc = me.contain.childNodes[me.selectIndex]; oc.style.background = "#ffffff"; oc.style.color = "#000000"; } } oo.onmouseout = function(){ this.style.background = "#ffffff"; this.style.color = "#000000"; } oo.onclick=function(){ me.stopChange = true; me.handle.value = this.innerText; me.stopChange = false; me.show(false); var r =me.handle.createTextRange(); r.moveStart('character',me.handle.value.length); r.collapse(true); r.select(); me.handle.focus(); me.selectIndex = -1; } oo.onblur = me.handle.onblur; me.line++; } } } w = me.handle.getBoundingClientRect().right - me.handle.getBoundingClientRect().left; l = me.handle.getBoundingClientRect().left-2; t = me.handle.getBoundingClientRect().bottom-2; } h = (me.line>6?6*16:me.line*16)+2; contain.style.position = "absolute"; contain.style.top = t; contain.style.left = l; contain.style.width = w; contain.style.height = h; contain.style.overflowY = "auto"; contain.style.overflowX = "hidden"; contain.style.backgroundColor = "#ffffff"; contain.style.border = "1px solid black"; contain.setAttribute("accoc",me.id + "__auto_complete_contain"); contain.onblur = me.handle.onblur; if(me.line<=0){ contain.style.display = "none"; }else{ contain.style.display = ""; } }else{ contain.style.display = "none"; } this.dropdown = flag; } this.filter = function(){ this.show(); } this.getText = function(){ if(me.selectIndex>=0){ me.handle.value = me.contain.childNodes[me.selectIndex].innerText; me.show(false); var r =me.handle.createTextRange(); r.moveStart('character',me.handle.value.length); r.collapse(true); r.select(); me.handle.focus(); me.selectIndex = -1; } } this.move = function(flag){ var osid = me.selectIndex; if(me.dropdown==false){ me.show(true); } if(flag){ me.selectIndex++; }else{ me.selectIndex--; } if(me.selectIndex>me.contain.childNodes.length-1){ me.selectIndex = 0; } if(me.selectIndex<0){ me.selectIndex = me.contain.childNodes.length-1; } if(osid>=0){ var d = me.contain.childNodes[osid]; d.style.background = "#ffffff"; d.style.color = "#000000"; } if(me.selectIndex>=0){ var c = me.contain.childNodes[me.selectIndex]; c.style.background = "highlight"; c.style.color = "highlighttext"; c.scrollIntoView(false); } } this.setup = function(o){ this.list = o.getAttribute("autolist").split("|"); //sort shellSort(this.list); o.setAttribute("accoc",me.id + "__auto_complete_contain"); this.handle = o; o.onpropertychange = function(){ if(event.propertyName=="value"){ if(me.stopChange==false){ me.filter(); } } } o.ondblclick = function(){ me.filter(); } o.onkeydown= function(){ switch(event.keyCode){ case 38://up me.move(false); break; case 40://down me.move(true); break; case 13: me.getText(); break; default: //alert(event.keyCode); } } o.onblur=function(){ var active = document.activeElement; var stopHide = false; if(active!=null){ var ac = active.getAttribute("accoc"); if(ac!=null&&typeof(ac)!="undefined"&&ac==me.id + "__auto_complete_contain"){ stopHide = true; } } if(stopHide==false){ me.show(false); } } } function shellSort(arr){ for (var step = arr.length >> 1; step > 0; step >>= 1){ for (var i = 0; i < step; ++i){ for (var j = i + step; j < arr.length; j += step){ var k = j, value = arr[j]; while (k >= step && arr[k - step] > value){ arr[k] = arr[k - step]; k -= step; } arr[k] = value; } } } } }//--> </ SCRIPT > < BODY > nick: < INPUT size =30 name =q autolist ='ba|ttyp|"|tt|typ|中国上海市|jimao8|中国|中|中国上海' > addr: < INPUT size =30 name =p autolist ='www.baidu.com|www.google.con|www.cnblogs.com/ttyp' > < SCRIPT LANGUAGE ="JavaScript" > <!-- var acbar1 = new CLASS_AUOTCOMPLETE(); acbar1.setup(document.all.q); var acbar2 = new CLASS_AUOTCOMPLETE(); acbar2.setup(document.all.p); //--> </ SCRIPT > </ BODY > </ HTML > http://www.cnblogs.com/ttyp/archive/2006/11/10/556840.html