可编辑下拉框客户端过滤

来源：互联网发布：大数据分析应用编辑：程序博客网时间：2024/06/06 11:38

HTML代码：

 <html> <head> <meta name="GENERATOR" content="Microsoft FrontPage 5.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>可编辑下拉框</title> <script src="可输入下拉框.js" type="text/javascript"></script><style type="text/css">.option{background-color: white;}.option:hover{background-color: gray;}</style></head> <body> <table style="border:2px outset;background-color:#d2e8FF" width="250" height="100" align="center"> <tr> <td width="100%" height="30" align="center"> <select id="fason" name="fason"> <option value="信托公司">信托公司</option><option value="证金公司">证金公司</option><option value="证券公司">证券公司</option><option value="证券公募">证券公募</option><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option></select></td> </tr> <tr> <td width="100%" height="30" align="center"> <select id="fason2" name="fason2"> <option value="信托公司">信托公司</option><option value="证金公司">证金公司</option><option value="证券公司">证券公司</option><option value="证券公募">证券公募</option><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option></select></td> </tr> </table> <script language="javascript"> var a=new combox("a","fason") a.init() ;var b=new combox("b","fason2") b.init() </script> </body> </html>

js代码：

function combox(obj,select){ this.obj=obj this.name=select; this.select=document.getElementsByName(select)[0]; /*要转换的下拉框*/ } /*初始化对象onfocus*/ combox.prototype.init=function(){ var inputbox="<input name='combox_"+this.name+"' onkeyup='"+this.obj+".find()' onfocus='"+this.obj+".find()' ";inputbox+="style='position:absolute;width:"+(this.select.offsetWidth)+";height:"+this.select.offsetHeight+";left:"+(getL(this.select))+";top:"+getT(this.select)+"'>";document.write(inputbox);with(this.select.style){ left=getL(this.select) top=getT(this.select) position="absolute" clip="rect(0 "+(this.select.offsetWidth)+" "+this.select.offsetHeight+" "+(this.select.offsetWidth-18)+")";} //this.change();} /*初始化结束*/ ////////对象事件定义/////// combox.prototype.find=function(){ /*当搜索到输入框的值时,下拉框展开div*/ //alert("input onchange");var inputbox=document.getElementsByName("combox_"+this.name)[0];with(this.select){ var my = document.getElementById("outter");if(my != null)my.parentNode.removeChild(my);var arrayObj = new Array();var subStr = "";for(i=0;i<options.length;i++){if(options[i].text.indexOf(inputbox.value)==0){ //selectedIndex=i //document.write(inputbox) //this.change(); arrayObj.push(i);subStr+="<div class='option' onclick='selectIt(this.innerHTML,\""+this.name+"\")'>"+options[i].text+"</div>";}}var resStr="<div style='font-size:12px; background-color:white; position:absolute; overflow:auto; border:1px solid #000000;;"+"width:"+(this.select.offsetWidth)+";height:"+(17*arrayObj.length>180?180:17*arrayObj.length)+";left:"+(getL(this.select))+";top:"+(20+getT(this.select))+"'>"+subStr+"</div>"var objdiv = document.createElement("DIV");   var objname="outter";   objdiv.id = objname;   objdiv.innerHTML=resStr;   objdiv.style.width = this.select.offsetWidth;   objdiv.style.height = 200;   //objdiv.style.overflow = "auto";   document.body.appendChild(objdiv);} } function selectIt(selectedOption,theSelectName){//alert(theSelectName);var theSelect = document.getElementById(theSelectName);with(theSelect){ for(i=0;i<options.length;i++){ var t1=options[i].text;var t2=selectedOption;var isb= (t1.trim()).indexOf(t2.trim());if(t1.trim().indexOf(t2.trim())==0){ options[i].selected = true;break;}} } var inputbox=document.getElementsByName("combox_"+theSelectName)[0];inputbox.value=theSelect.options[theSelect.selectedIndex].text; //with(inputbox){select();focus();};var my = document.getElementById("outter");if(my != null)my.parentNode.removeChild(my);}////////对象事件结束/////// /*公用定位函数(获取控件绝对坐标)*/ function getL(e){ var l=e.offsetLeft; while(e=e.offsetParent)l+=e.offsetLeft; return l } function getT(e){ var t=e.offsetTop; while(e=e.offsetParent)t+=e.offsetTop; return t } /*结束*/

0 0

可编辑下拉框 客户端过滤

可编辑下拉框客户端过滤