利用jQuery是实现可输入（搜索）的下拉框

         先看效果

 

功能：点击下拉框输入框时，自动显示下面的下拉列表，而且是根据输入框中输入的搜索添加，自动在后台查找，然后传到前台，展现页面。

用的的js：

var $xialaSELECT;
$(document).ready(function(){
	
	initXialaSelect();
	initSearch();	
});



var temptimeout=null;
var query="";
function searchDev(key){
	//if(key == "")return;
	query=key;
	clearTimeout(temptimeout);
	temptimeout= setTimeout(findUnSaved, 500);	
}

function findUnSaved()
{
	//alert("dd");
	//if(1==1)return;
	$.ajax({
		type: "post",	
		data:{'query':query},
		url: path + "/tList.action",		
		success: function(data) {			
			 xiala(data);
		},
		error: function(data) {
			alert("加载失败，请重试！");
			
		}
	});	
}
function initSearch()
{
		//定义一个下拉按钮层，并配置样式(位置，定位点坐标，大小，背景图片，Z轴)，追加到文本框后面 
	$xialaDIV = $('<div></div>').css('position', 'absolute').css('left', $('#province').position().left + $('#province').width() - 15  + 'px').css('top', 
	$('#province').position().top + 4 + 'px').css('background', 'transparent url(../images/lala.gif) no-repeat top left').css('height', '16px').css('width', 
		'15px').css('z-index', '100'); 
	$('#province').after($xialaDIV); 
	
	//鼠标进入修改背景图位置 
	$xialaDIV.mouseover(function(){ 
		$xialaDIV.css('background-position', ' 0% -16px'); 
	}); 
	
			//鼠标移出修改背景图位置 
	$xialaDIV.mouseout(function(){ 
		$xialaDIV.css('background-position', ' 0% -0px'); 
	}); 
			
	//鼠标按下修改背景图位置 
	$xialaDIV.mousedown(function(){ 
	
		$xialaDIV.css('background-position', ' 0% -32px'); 
	}); 
	
	//鼠标释放修改背景图位置 
	$xialaDIV.mouseup(function(){ 
		$xialaDIV.css('background-position', ' 0% -16px'); 
		if($xialaSELECT)
		$xialaSELECT.show(); 
	}); 
	
	$('#province').mouseup(function(){	
		$xialaDIV.css('background-position', ' 0% -16px'); 
		$xialaSELECT.show(); 
	});
}
var firstTimeYes=1;
//文本框的下拉框div
function xiala(data){		
			//first time
			if($xialaSELECT)
				{
					$xialaSELECT.empty();
				}
		//定义一个下拉框层，并配置样式(位置，定位点坐标，宽度，Z轴)，先将其隐藏 				
	//定义五个选项层，并配置样式(宽度，Z轴一定要比下拉框层高)，添加name、value属性，加入下拉框层 
			
			$xialaSELECT.append(data);
				if(firstTimeYes == 1)
					{	
					firstTimeYes =firstTimeYes+1;
					}else{
						$xialaSELECT.show(); 
					}		
}
function initXialaSelect()
{
	
	$xialaSELECT = $('<div></div>').css('position', 'absolute').css('overflow-y','scroll').css('overflow-x','hidden').css('border', '1px solid #809DB9').css('border-top','none').css('left',  '125px').css 
	('top', $('#province').position().top + $('#province').height() + 6 + 'px').css('width', $('#province').width() + 'px').css('z-index', '101').css('width','152px').css('background','#fff').css('height','200px').css('max-height','600px'); 
	$('#province').after($xialaSELECT); 
	//选项层的鼠标移入移出样式 
	$xialaSELECT.mouseover(function(event){ 
		if ($(event.target).attr('name') == 'option') { 
			//移入时背景色变深，字色变白 
				$(event.target).css('background-color', '#000077').css('color', 'white'); 
			$(event.target).mouseout(function(){ 
			//移出是背景色变白，字色变黑 
				$(event.target).css('background-color', '#FFFFFF').css('color', '#000000'); 
			}); 
		} 
	}); 
	
	//通过点击位置，判断弹出的显示 
	
	$xialaSELECT.mouseup(function(event){ 
	//如果是下拉按钮层或下拉框层，则依然显示下拉框层 
		if (event.target == $xialaSELECT.get(0) || event.target == $xialaDIV.get(0)) { 
			$xialaSELECT.show(); 
		} 
		else { 
		//如果是选项层，则改变文本框的值 
		if ($(event.target).attr('name') == 'option') { 
		//弹出value观察 
		$('#nce').val($(event.target).html()); 
		$('#d').val($(event.target).attr("d")); 
		
		//if seleced host then hidden the dev type
		if($(event.target).attr("ass") == 3305)
			{
				$("#ype").hide();
				$("#ost").val(1);
			}else{
				$("#ype").show();
				$("#ost").val(-1);
			}		
		} 
		//如果是其他位置，则将下拉框层 
		if ($xialaSELECT.css('display') == 'block') { 
			$xialaSELECT.hide(); 
		} 
		} 
	}); 
	
	$xialaSELECT.hide(); 
}
	var k = 1;
	document.onclick = clicks;
	function clicks()
	{
		if(k ==2){
			k = 1;
			if($xialaSELECT)
				{
				if ($xialaSELECT.css('display') == 'block') { 
					$xialaSELECT.hide(); 
				} 
				}
		}else{
			k = 2;
		}
	}	

 

.cba {
	width: 150px;
	height: 18px;
}
.selectlala {
	text-align: left; 
	line-height: 20px; 
	padding-left: 5px; 
	width: 147px; 
	font-family:  Arial,verdana,tahoma; 
	height: 20px;
}
<input type="text" name="province" id="province" class="cba" οnkeyup="searchDev(this.value)"/>