아주 유용한 전단 js 자동 보완 플러그인을 발견하여 여러분께 공유합니다 (false)

	$(function() {

		$("#tt").bigAutocomplete({
			width : 600,  //          
			data : [ {
				title : "     ",
				result : {
					ff : "qq"
				}
			}, {
				title : "         "
			}, {
				title : "    "
			}, {
				title : "    "
			}, {
				title : "        "
			}, {
				title : "         "
			}, {
				title : "         "
			}, {
				title : "      "
			}, {
				title : "        "
			}, {
				title : "    "
			} ],
			callback : function(data) {
				//do something
			}
		});

	})




	

(function($){
	var bigAutocomplete = new function(){
		this.currentInputText = null;//          （                   ）
		this.functionalKeyArray = [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];//          
		this.holdText = null;//           
		
		//         div，  document  mousedown，   div    div
		this.init = function(){
			$("body").append("
");
			$(document).bind('mousedown',function(event){
				var $target = $(event.target);
				if((!($target.parents().andSelf().is('#bigAutocompleteContent'))) && (!$target.is(bigAutocomplete.currentInputText))){
					bigAutocomplete.hideAutocomplete();
				}
			})
			
			//          
			$("#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() {
				bigAutocomplete.currentInputText.val( $(this).find("div:last").html());
				var callback_ = bigAutocomplete.currentInputText.data("config").callback;
				if($("#bigAutocompleteContent").css("display") != "none" && callback_ && $.isFunction(callback_)){
					callback_($(this).data("jsonData"));
					
				}				
				bigAutocomplete.hideAutocomplete();
			})			
			
		}
		
		this.autocomplete = function(param){
			
			if($("body").length > 0 && $("#bigAutocompleteContent").length <= 0){
				bigAutocomplete.init();//     
			}			
			
			var $this = $(this);//             jquery  
			
			var $bigAutocompleteContent = $("#bigAutocompleteContent");
			
			this.config = {
			               //width:      ，         
			               width:$this.outerWidth() - 2,
			               //url：  url:""  ajax      ，        data    
			               url:null,
			               /*data：  {data:[{title:null,result:{}},{title:null,result:{}}]}
			               url data        ，data  */
			               data:null,
			               //callback：                
			               callback:null};
			$.extend(this.config,param);
			
			$this.data("config",this.config);
			
			//   keydown  
			$this.keydown(function(event) {
				switch (event.keyCode) {
				case 40://   
					
					if($bigAutocompleteContent.css("display") == "none")return;
					
					var $nextSiblingTr = $bigAutocompleteContent.find(".ct");
					if($nextSiblingTr.length <= 0){//      ，     
						$nextSiblingTr = $bigAutocompleteContent.find("tr:first");
					}else{
						$nextSiblingTr = $nextSiblingTr.next();
					}
					$bigAutocompleteContent.find("tr").removeClass("ct");
					
					if($nextSiblingTr.length > 0){//     （      ）
						$nextSiblingTr.addClass("ct");//       
						$this.val($nextSiblingTr.find("div:last").html());//            
						
						//div       ,jquery-1.6.1 $nextSiblingTr.offset().top  bug，     
						$bigAutocompleteContent.scrollTop($nextSiblingTr[0].offsetTop - $bigAutocompleteContent.height() + $nextSiblingTr.height() );
						
					}else{
						$this.val(bigAutocomplete.holdText);//             
					}
					
					
					break;
				case 38://   
					if($bigAutocompleteContent.css("display") == "none")return;
					
					var $previousSiblingTr = $bigAutocompleteContent.find(".ct");
					if($previousSiblingTr.length <= 0){//      ，       
						$previousSiblingTr = $bigAutocompleteContent.find("tr:last");
					}else{
						$previousSiblingTr = $previousSiblingTr.prev();
					}
					$bigAutocompleteContent.find("tr").removeClass("ct");
					
					if($previousSiblingTr.length > 0){//     （     ）
						$previousSiblingTr.addClass("ct");//       
						$this.val($previousSiblingTr.find("div:last").html());//            
						
						//div       ,jquery-1.6.1 $$previousSiblingTr.offset().top  bug，     
						$bigAutocompleteContent.scrollTop($previousSiblingTr[0].offsetTop - $bigAutocompleteContent.height() + $previousSiblingTr.height());
					}else{
						$this.val(bigAutocomplete.holdText);//             
					}
					
					break;
				case 27://ESC      
					
					bigAutocomplete.hideAutocomplete();
					break;
				}
			});		
			
			//   keyup  
			$this.keyup(function(event) {
				var k = event.keyCode;
				var ctrl = event.ctrlKey;
				var isFunctionalKey = false;//          
				for(var i=0;i -1){
								data_.push(data[i]);
							}
						}
						
						makeContAndShow(data_);
					}else if(url != null && url != ""){//ajax    
						$.post(url,{keyword:keyword_},function(result){
							makeContAndShow(result.data)
						},"json")
					}

					
					bigAutocomplete.holdText = $this.val();
				}
				//   
				if(k == 13){
					var callback_ = $this.data("config").callback;
					if($bigAutocompleteContent.css("display") != "none"){
						if(callback_ && $.isFunction(callback_)){
							callback_($bigAutocompleteContent.find(".ct").data("jsonData"));
						}
						$bigAutocompleteContent.hide();						
					}
				}
				
			});	
			
					
			//     html     
			function makeContAndShow(data_){
				if(data_ == null || data_.length <=0 ){
					return;
				}
				
				var cont = "";
				for(var i=0;i"
				}
				cont += "
" + data_[i].title + "
";
				$bigAutocompleteContent.html(cont);
				$bigAutocompleteContent.show();
				
				//  tr    ，       
				$bigAutocompleteContent.find("tr").each(function(index){
					$(this).data("jsonData",data_[index]);
				})
			}			
					
			
			//   focus  
			$this.focus(function(){
				bigAutocomplete.currentInputText = $this;
			});
			
		}
		//     
		this.hideAutocomplete = function(){
			var $bigAutocompleteContent = $("#bigAutocompleteContent");
			if($bigAutocompleteContent.css("display") != "none"){
				$bigAutocompleteContent.find("tr").removeClass("ct");
				$bigAutocompleteContent.hide();
			}			
		}
		
	};
	
	
	$.fn.bigAutocomplete = bigAutocomplete.autocomplete;
	
})(jQuery)

.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;
}