xxpniu

2008-02-20

Js AutoComplete Data User Json


/*
* author xxp 2008-12-2-19
*/

/*
   {
	   responseInfo:{success:true,message:'返回数据!'},
	   data : [
			     {title:'<html>',completeData:'auto'},..
			   ]
	   }
  
*/

var AutoComplete = Class.create({
							   initialize:function(url,input,div){
								    
									this.url=url;
									this.input=input;
									this.div=div;
									var _in = $(input);
									var _div= $(div);
									this.fix = null;
									$(this.input)._autoComplete=this;
									$(this.input).onkeyup=function(){
										  
										  if(!event) event = window.event;
											  switch(event.keyCode) {
											   case Event.KEY_ESC:
												 this._autoComplete.doHide();
												 return;
											}
											this._autoComplete.doPost(); 
										};
							    },
								//getData
								data:null,
								doPost:function(){
									var obj=this;
									new Ajax.Request(
													  this.url+'?k='+$(this.input).value,
													  {
														  onSuccess:function(r){
															    try{
																 var _d = r.responseText.evalJSON();
																 if(_d.responseInfo.success&&_d.data.length>0){
																	 obj.data=_d;
																	 obj.doDisplay();
																	 }
																}catch(ex){
																	 //do nothing 
																	 //for test please use this code 
																	 alert("process data :"+ex.message);
																	}
															  }
														  }
													 );
									},
								doDisplay : function(){
									 this.doShow();
									 try{
									 var obj =this;
									 var id = new Date().getTime();
									  var html='<div id="'+id+'fix" style="position:absolute; border:1px #000000 solid;background:#FFFFFF"></div>';
									  $(this.div).innerHTML=html;
									  this.fix=$(id+'fix');
									  var _ul = new Element('ul');
									  this.fix.appendChild(_ul);
									  this.data.data.each(
											  function(i){
												  //process
												  var _li = new Element('li');
												  _li._autoComplete = obj;
												  _li.innerHTML = i.title;
												  _li._data =  i.completeData;
												  _li.onclick = function (){
													     this._autoComplete.doEnter(this);
													  }
												  _li.onmouseover=function(){this.setStyle({background:"#E6ECFB"})};
												  _li.onmouseout=function(){this.setStyle({background:""})};	 
												  _li.setStyle({cursor:'pointer'});	  
												  _ul.appendChild(_li);
												  }			  
											);
									 }catch(ex){
										 alert(ex.message);
										 }
									},//doDisply	
								doEnter  : function(obj){
									$(this.input).value=obj._data;
									this.doHide();
									},
								doShow   : function(){
									if($(this.div).getStyle('display')=='none'){
										$(this.div).setStyle({'display':'block'});
										}
									
									},	
								doHide   : function(){
									if($(this.div).getStyle('display')=='block'){
										$(this.div).setStyle({'display':'none'});
										}
									if(this.fix)	
									this.fix.remove();		
									}	
								}
							  );


    <input  type="text" name="user" id="user" value="<%=User%>"  autocomplete="off"  />
    <div id="userNoAuto" class="autoComplete"></div>
      <script>
        new AutoComplete('json/User.asp','user','userNoAuto');
      </script>
    </div>