可编辑下拉框客户端过滤

最新推荐文章于 2025-03-18 16:05:42 发布

ssl15123

最新推荐文章于 2025-03-18 16:05:42 发布

阅读量544

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/ssl15123/article/details/46722603

Web前端专栏收录该内容

1 篇文章

订阅专栏

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 
} 
/*结束*/