下拉框输入选择js

(function($){
	var bigAutocomplete = new function(){
		 = null;//Ŀǰ��ù�������?��һ��ҳ�����������Զ���ȫ���ܣ�
		 = [9,20,13,16,17,18,91,92,93,45,36,33,34,35,37,39,112,113,114,115,116,117,118,119,120,121,122,123,144,19,145,40,38,27];//�����Ϲ��ܼ���ֵ����
		 = null;//�������ԭʼ���������
		
		//��ʼ�������Զ���ȫdiv������documentע��mousedown�������div��������div
		 = function(){
			$("body").append("<div id='bigAutocompleteContent' class='bigautocomplete-layout'></div>");
			$(document).bind('mousedown',function(event){
				var $target = $();
				if((!($().andSelf().is('#bigAutocompleteContent'))) && (!$())){
					();
				}
			})
			
			//�����ͣʱѡ�е�ǰ��
			$("#bigAutocompleteContent").delegate("tr", "mouseover", function() {
				$("#bigAutocompleteContent tr").removeClass("ct");
				$(this).addClass("ct");
			}).delegate("tr", "mouseout", function() {
				$("#bigAutocompleteContent tr").removeClass("ct");
			});		
			
			
			//����ѡ���к�ѡ�����������õ�������У���ִ��callback����
			$("#bigAutocompleteContent").delegate("tr", "click", function() {
				//( $(this).find("div:last").html());
				var callback_ = ("config").callback;
				if($("#bigAutocompleteContent").css("display") != "none" && callback_ && $.isFunction(callback_)){
					callback_($(this).data("jsonData"));
					
				}				
				();
			})			
			
		}
		
		 = function(param){
			
			if($("body").length > 0 && $("#bigAutocompleteContent").length <= 0){
				();//��ʼ����Ϣ
			}			
			
			var $this = $(this);//Ϊ���Զ���ȫ���ܵ������jquery����
			
			var $bigAutocompleteContent = $("#bigAutocompleteContent");
			
			 = {
			               //width:������Ŀ�ȣ�Ĭ��ʹ���������
			               width:$() - 2,
			               //url����ʽurl:""����ajax��̨��ȡ���ݣ����ص����ݸ�ʽΪdata����һ��
			               url:null,
			               /*data����ʽ{data:[{title:null,result:{}},{title:null,result:{}}]}
			               url��data����ֻ��һ����Ч��data����*/
			               data:null,
			               //callback��ѡ���к?س��?�ʱ�ص��ĺ���
			               callback:null 
			                };
			$.extend(,param);
			
			$("config",);
			
			//�����keydown�¼�
			$(function(event) {
				switch () {
				case 40://���¼�
					
					if($("display") == "none")return;
					
					var $nextSiblingTr = $(".ct");
					if($ <= 0){//û��ѡ����ʱ��ѡ�е�һ��
						$nextSiblingTr = $("tr:first");
					}else{
						$nextSiblingTr = $();
					}
					$("tr").removeClass("ct");
					
					if($ > 0){//����һ��ʱ���������һ�У�
						$("ct");//ѡ�е��мӱ���
						//$($("div:last").html());//ѡ�����������õ��������
						
						//div������ѡ�е���,jquery-1.6.1 $().top ��bug����ֵ������
						$($nextSiblingTr[0].offsetTop - $() + $() );
						
					}else{
						$();//�������ʾ�û�ԭʼ�����ֵ
					}
					
					
					break;
				case 38://���ϼ�
					if($("display") == "none")return;
					
					var $previousSiblingTr = $(".ct");
					if($ <= 0){//û��ѡ����ʱ��ѡ�����һ����
						$previousSiblingTr = $("tr:last");
					}else{
						$previousSiblingTr = $();
					}
					$("tr").removeClass("ct");
					
					if($ > 0){//����һ��ʱ�����ǵ�һ�У�
						$("ct");//ѡ�е��мӱ���
						//$($("div:last").html());//ѡ�����������õ��������
						
						//div������ѡ�е���,jquery-1.6.1 $$().top ��bug����ֵ������
						$($previousSiblingTr[0].offsetTop - $() + $());
					}else{
						$();//�������ʾ�û�ԭʼ�����ֵ
					}
					
					break;
				case 27://ESC������������
					
					();
					break;
				}
			});		
			
			//�����keyup�¼�
			$(function(event) {
				var k = ;
				var ctrl = ;
				var isFunctionalKey = false;//���µļ��Ƿ��ǹ��ܼ�
				for(var i=0;i<;i++){
					if(k == [i]){
						isFunctionalKey = true;
						break;
					}
				}
				//k��ֵ���ǹ��ܼ�����ctrl+c��ctrl+xʱ�Ŵ����Զ���ȫ����
				if(!isFunctionalKey && (!ctrl || (ctrl && k == 67) || (ctrl && k == 88)) ){
					var config = $("config");
					
					var offset = $();
					$();
					var h = $() - 1;
					$({"top": + h,"left":});
					
					var data = ;
					var url = ;
					var keyword_ = $.trim($());
					if(keyword_ == null || keyword_ == ""){
						();
						return;
					}					
					if(data != null && $.isArray(data) ){
						var data_ = new Array();
						for(var i=0;i<;i++){
							if(data[i].(keyword_) > -1){
								data_.push(data[i]);
							}
						}
						
						makeContAndShow(data_,keyword_);
					}else if(url != null && url != ""){//ajax��������
						$.post(url,{keyword:keyword_},function(result){
							var rudata=(result);
							//(rudata);
							makeContAndShow(rudata,keyword_)
						},"json")
					}

					
					 = $();
				}
				//�س���
				if(k == 13){
					var callback_ = $("config").callback;
					if($("display") != "none"){
						if(callback_ && $.isFunction(callback_)){
							callback_($(".ct").data("jsonData"));
						}
						$();						
					}
				}
				
			});	
			
					
			//��װ������html���ݲ���ʾ
			function makeContAndShow(data_,keywordvalue){
				if(data_ == null || data_.length <=0 ){
					return;
				}
				
				var cont = "<table><tbody>";
				for(var i=0;i<data_.length;i++){
					var mdata=data_[i].title;
//					var wz=(keywordvalue);
//					if(wz!=-1){
//						var rd="<span style='color:red;'>"+(wz,wz+)+"</span>";
//						mdata=(keywordvalue, rd);
//					}
					cont += "<tr><td><div>" + mdata + "</div></td></tr>"
				}
				cont += "</tbody></table>";
				$(cont);
				$();
				
				//ÿ��tr�����ݣ����ظ��ص�����
				$("tr").each(function(index){
					$(this).data("jsonData",data_[index]);
				})
			}			
					
			
			//�����focus�¼�
			$(function(){
				 = $this;
			});
			
		}
		//����������
		 = function(){
			var $bigAutocompleteContent = $("#bigAutocompleteContent");
			if($("display") != "none"){
				$("tr").removeClass("ct");
				$();
			}			
		}
		
	};
	
	
	$. = ;
	
})(jQuery)

@charset "utf-8";
.bigautocomplete-layout{display:none;background-color:#FFFFFF;border:1px solid #BCBCBC;position:absolute;z-index:100;max-height:220px;overflow-x:hidden;overflow-y:auto; }
.bigautocomplete-layout table{border-collapse:collapse;border-spacing:0;background:none repeat scroll 0 0 #FFFFFF;width:100%;cursor:default;}
.bigautocomplete-layout table tr{background:none repeat scroll 0 0 #FFFFFF;}
.bigautocomplete-layout .ct{background:none repeat scroll 0 0 #D2DEE8 !important;}
.bigautocomplete-layout div{word-wrap:break-word;word-break:break-all;padding:1px 5px;font-size:16px;}

@ResponseBody
    public Object getworkdata(String keyword){
        if((keyword)) {//like "%obj"
            
        }
         
        
        return "";
    }

 
         $("#ordWorker").bigAutocomplete({
                width:230,
                url:"",
                callback:function(data){
                     (data)
                }
            });