可输入的下拉框

var Select = {
	isOpera :(navigator.userAgent.toLowerCase().indexOf('opera') != -1),
	isIE : (navigator.userAgent.toLowerCase().indexOf('msie') != -1 && !this.isOpera),
	isIE6 : (navigator.userAgent.toLowerCase().indexOf("msie 6.0") != -1),
	isSafari : (navigator.userAgent.toLowerCase().indexOf('safari') != -1),
	getElementPos : function(el){
		if (el.parentNode === null || el.style.display == 'none') {
			return false;
		}
		var parent = null;
		var pos = [];
		var box;
		if (el.getBoundingClientRect) { // IE
			box = el.getBoundingClientRect();
			var scrollTop = Math.max(document.documentElement.scrollTop,document.body.scrollTop);
			var scrollLeft = Math.max(document.documentElement.scrollLeft,document.body.scrollLeft);
			return {
				x : box.left + scrollLeft,
				y : box.top + scrollTop
			};
		} else if (document.getBoxObjectFor) { // gecko
			box = document.getBoxObjectFor(el);
			var borderLeft = (el.style.borderLeftWidth)	? parseInt(el.style.borderLeftWidth): 0;
			var borderTop = (el.style.borderTopWidth)? parseInt(el.style.borderTopWidth): 0;
			pos = [box.x - borderLeft, box.y - borderTop];
		} else { // safari & opera
			pos = [el.offsetLeft, el.offsetTop];
			parent = el.offsetParent;
			if (parent != el) {
				while (parent) {
					pos[0] += parent.offsetLeft;
					pos[1] += parent.offsetTop;
					parent = parent.offsetParent;
				}
			}
			if (this.isOpera|| (this.isSafari && el.style.position == 'absolute')) {
				pos[0] -= document.body.offsetLeft;
				pos[1] -= document.body.offsetTop;
			}
		}
		if (el.parentNode) {
			parent = el.parentNode;
		} else {
			parent = null;
		}
		while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { 
			pos[0] -= parent.scrollLeft;
			pos[1] -= parent.scrollTop;
			if (parent.parentNode) {
				parent = parent.parentNode;
			} else {
				parent = null;
			}
		}
		return {
			x : pos[0],
			y : pos[1]
		};
	},
	inittextfield : function(el){
		var selectWidth = el.offsetWidth;
		textfield = document.createElement("input");
		var txtid = "txt"+ el.id;
		textfield.id = txtid;
		textfield.style.zIndex = "99999";
		if (el.value == "") {
			textfield.value = "输入或选择";
			textfield.style.color = "#ccc";
		} else {
			textfield.value = el.value;
		}
		textfield.style.position = "absolute";
		textfield.style.top = this.getElementPos(el).y + "px";
		textfield.style.left = this.getElementPos(el).x + "px";
		textfield.style.border = "none";
		if (this.isSafari) {
			var selectButtonWidth = 18;
			textfield.style.marginTop = "0px";
			textfield.style.marginLeft = "0px";
		} else if (this.isOpera) {
			var selectButtonWidth = 27;
			textfield.style.marginTop = "4px";
			textfield.style.marginLeft = "4px";
		} else {
			if(this.isIE6)
				this.initIframe(el);
			var selectButtonWidth = 27;
			textfield.style.marginTop = "2px";
			textfield.style.marginLeft = "3px";
		}
		textfield.style.width = (selectWidth - selectButtonWidth) + "px";
		el.parentNode.appendChild(textfield);
		el.onchange = function() {
			val = this.options[this.selectedIndex].value;
			document.getElementById(txtid).value = val;
		}
		el.onfocus = function() {
			document.getElementById(txtid).style.color = "#333";
		}
		textfield.onfocus = function() {
			this.style.color = "#333";
			this.select();
		}
		textfield.onchange = function() {
			el.options[0].value = el.options[0].text = document.getElementById(txtid).value;
			el.options[0].selected = true;
		}
	},
	//解决IE6下面的问题
	initIframe : function(el) {
		var textWidth = el.offsetWidth;
		var textHeight = el.offsetHeight;
		var hackFrame = document.createElement("iframe");
		hackFrame.setAttribute("src", "about:blank");
		hackFrame.setAttribute("scrolling", "0");
		hackFrame.setAttribute("tabindex", "-1");
		hackFrame.id = "frame" + el.name;
		hackFrame.style.position = "absolute";
		hackFrame.style.width = textWidth -25+ "px";
		hackFrame.style.height = textHeight-5 + "px";
		hackFrame.style.top = this.getElementPos(el).y + "px";
		hackFrame.style.left = this.getElementPos(el).x + "px";
		hackFrame.style.marginTop = "3px";
		hackFrame.style.marginLeft = "3px";
		el.parentNode.insertBefore(hackFrame, el);
	}
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>可输入的下拉框 - clone(http://hi.baidu.com/hulk168)</title>
<script type="text/javascript" src="select.js" charset="gb2312"></script>
</head>
<body>


<select id="user_fromto" style="width: 90px;">
	<option value=""></option>
	<option value="北京">北京</option>
	<option value="上海">上海</option>
	<option value="广州">广州</option>
	<option value="深圳">深圳</option>
	<option value="重庆"  >重庆</option>
	<option value="武汉">武汉</option>
	<option value="成都">成都</option>
	<option value="长沙">长沙</option>
	<option value="济南">济南</option>
	<option value="大连">大连</option>
	<option value="杭州">杭州</option>
	<option value="苏州">苏州</option>
</select>


<select id="user_fromto1" style="width: 90px;">
  <option value=""></option>
  <option value="上海">上海</option>
  <option value="广州">广州</option>
  <option value="深圳">深圳</option>
  <option value="重庆">重庆</option>
  <option value="武汉">武汉</option>
  <option value="成都">成都</option>
  <option value="长沙">长沙</option>
  <option value="济南">济南</option>
  <option value="大连">大连</option>
  <option value="杭州">杭州</option>
  <option value="苏州">苏州</option>
</select>

<script type="text/javascript">
window.onload = function(){
	Select.inittextfield(document.getElementById("user_fromto"));
	Select.inittextfield(document.getElementById("user_fromto1"));
}
</script>
</body>
</html>