javascript autocomplate自動提示代碼

//定義對象
var CJComplete = Class.create();
CJComplete.prototype =
{
 TIMER_TICK : 10, 
 MAX_VISIBLE : 16,
 //建構函式
 initialize : function(element,type,ejs,sel)
 {  
  this.visible = false;  
  this.selectedIndex = -1;
  this.data = new Array();
  this.type = type;
  this.ejs = $(ejs);
  this.sel = $(sel);   
  //擷取輸入框對象,並關閉其自動提示功能
  this.element = $(element);
  if(!this.element)
  {
    throw("The specified <input> element does not exist.");
  }  
  this.element.setAttribute("autocomplete","off");    
  
  if($("popdiv"))
  {
   document.body.removeChild($("popdiv"));
  }
  
  //建立下拉式清單層
  this.popup = document.createElement("div");
    Element.hide(this.popup);
    this.popup.className = "popup";
  this.popup.id = "popdiv";
    document.body.appendChild(this.popup); 
  
  //var iframe = document.createElement("iframe");
  //iframe.width = "1px";
    //iframe.height = "1px";
    //this.popup.appendChild(iframe);
  
  
  //alert($("popdiv"));
  
  //建立下拉式清單項數組
  this.listItems = new Array(); 
  for(var i=0;i<this.MAX_VISIBLE;i++)
  {
   var item = document.createElement("div");   
   item.className = "item";           
   this.popup.appendChild(item);
   this.listItems[i] = item ;
   item.autocomplete = this;
   item.number = i;

   item.onclick = this.onItemClick;
   item.onmouseover = this.onItemOn;
   item.onmouseout = this.onItemOff;
  }
  
  
  Event.unloadCache();
  //加入事件監聽
  Event.observe(this.element,"keypress",this.onKeyPress.bindAsEventListener(this));
    Event.observe(this.element,"keydown",this.onKeyDown.bindAsEventListener(this));
  Event.observe(document,"click",this.onWindowClick.bindAsEventListener(this));
  
  this.onTick = this.onTick.bind(this);
  
 },
 
 onWindowClick : function(event)
 {
  var element = Event.element(event);  
  var parent = element;
  while(parent)
  {
   if(parent == this.element || parent == this.popup)
   {
    return;
   }   
   parent = parent.parentNode;
  }

  this.hide();
 },
 
 onKeyPress : function(event)
 {          
  if(event.keyCode == Event.KEY_DOWN)
  {
   if(this.data.length>0)
   {
     this.selectedIndex++;
     if(this.selectedIndex >= this.data.length)
      this.selectedIndex = 0;    
     this.show();    
   }
   Event.stop(event);
   return;
  }
  else if(event.keyCode == Event.KEY_UP)
  {
   if(this.data.length>0)
   {
     this.selectedIndex--;
     if(this.selectedIndex <= -1)
       this.selectedIndex = this.data.length-1;    
     this.show();    
   }
   Event.stop(event);
   return;   
  }  
  else if(event.keyCode != 13)
  {
   if(this.timerId)
    clearTimeout(this.timerId);

   this.timerId = setTimeout(this.onTick,this.TIMER_TICK);
  }
 },
 
 onKeyDown : function(event)
 {
  if(event.keyCode == 13)
  {   
    if(this.visible)
    {
   this.select();
   Event.stop(event);
   return false;
    }
    else
    {
      openwin(this.sel.value.replace('$StockCode$',this.element.value));
    }
  }  
 },
 
 onTick : function()
 {
  this.selectedIndex = -1;
  this.scroll = 0;
  if(this.element.value != '')
  {
   this.loadData("http://web3.jrj.com.cn/quoteelf2/default.aspx?key="+ this.element.value +"&type="+ this.type +"&rand="+Math.round(Math.random()*10000))
  }
  else
  {
   this.hide();
  }
 },
 
 show : function()
 {   
  
  if(this.data.length <= 0)
      return ;
  for(var i=0;i<this.MAX_VISIBLE;i++)
  {   
   if(this.data[i])
   {

    this.listItems[i].innerHTML = this.data[i];
    
    if(this.selectedIndex == i)
      Element.addClassName(this.listItems[i],"selected");
     else
      Element.removeClassName(this.listItems[i],"selected");
     
    Element.show(this.listItems[i]);
   }
   else
   {
    Element.hide(this.listItems[i]);
   }  
  }
   
  this.visible = true;       
  Element.show(this.popup);
  this.setPopupPosition();

 },
 
 hide : function()
 {
  this.data = new Array();
  this.selectedIndex = -1;
  this.scroll = 0;
  this.visible = false;
  Element.hide(this.popup);
 },
 
 loadData : function(url)
 {
  //alert(url);
  var me = this;  
  var newscript = document.createElement("script");  
        newscript.type = "text/javascript";   
        newscript.id = me.ejs.id;
        newscript.src = url;    
        document.getElementsByTagName('body')[0].replaceChild(newscript,me.ejs);
        me.ejs = newscript;       
        var load = function()
  {
   if(typeof(loadflag)=='undefined' || !(loadflag))
   {
     setTimeout(load,100);    
   }
   else
   {
     me.data=data;    
     data=null;    
     loadflag=false;
     if(me.data.length > 0)    
        me.show();    
       else
        me.hide();
   }
  };
  load();
    
 },
 
 onItemOn : function()
 {
  for(var i=0;i<this.autocomplete.MAX_VISIBLE;i++)
   Element.removeClassName(this.autocomplete.listItems[i],"selected");
    
  Element.addClassName(this,"selected");
  this.autocomplete.selectedIndex = this.number;
 },

 onItemOff : function()
 {
  Element.removeClassName(this,"selected");
  this.autocomplete.selectedIndex = -1;
 },

 onItemClick : function()
 {
  this.autocomplete.selectedIndex = this.number;
  this.autocomplete.select();      
 },
 
 select : function()
 {  
  if(this.selectedIndex != -1 && this.data.length>0)
  {
   this.element.value = this.data[this.selectedIndex].substr(1,this.data[this.selectedIndex].lastIndexOf(']')-1);
  }  
  this.hide();
 },
 
 setPopupPosition : function()
  {
  var position = Position.cumulativeOffset(this.element);
  var scrollY = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop;
  var viewHeight = (navigator.userAgent.toLowerCase().indexOf("safari") != -1 && window.innerHeight) ? window.innerHeight : document.documentElement.clientHeight;
  this.popup.style.width = "143px";
  this.popup.style.left = position[0] + "px";  
  var popupTop = position[1] + Element.getHeight(this.element);
  if((popupTop + this.popup.offsetHeight > scrollY + viewHeight) && (position[1] - this.popup.offsetHeight > scrollY))
  {
    popupTop = position[1] - this.popup.offsetHeight;
  }
  
  this.popup.style.top = popupTop + "px";
 }
 
};