输入自动完成类

V0.1（2006-11-10）

• 纯JS，无须再加CSS
• 支持键盘鼠标
• 仅IE6+
  

V0.2（2006-11-16）

• 修复了多个控件的下拉不隐藏的BUG
• 修改下拉背景的透明问题

V0.3（2006-12-22）

• 修复了键盘和鼠标选择的BUG
• 增加了JS代码添加选项的功能

 V0.31（2006-12-25）

• 修复了无匹配时下拉后的BUG

 

< HTML >
  < HEAD >
   < TITLE > AutoComplete </ TITLE >
   < META  NAME ="Generator"  CONTENT ="EditPlus" >
   < META  NAME ="Author"  CONTENT ="" >
   < META  NAME ="Keywords"  CONTENT ="" >
   < META  NAME ="Description"  CONTENT ="" >
  </ HEAD >
< SCRIPT  LANGUAGE ="JavaScript" >
<!--

/* *  
**    ==================================================================================================  
**    ClassName    ：CLASS_AUTOCOMPLETE  
**    Intro        ：a control similar IE Address Bar 
**    Example    ：  
      Ver        ： 0.31
    ---------------------------------------------------------------------------------------------------  
  
     nick：<INPUT size=30 name=q autolist='ba|ttyp|"|tt|typ|中国上海市|www.baidu.com|www.google.con|jimao8|中国|中|中国上海'>

     <SCRIPT LANGUAGE="JavaScript">
     <!--
        var acbar = new CLASS_AUOTCOMPLETE();
            acbar.setup(document.all.q);
     //-->

    < /SCRIPT>
  
    ---------------------------------------------------------------------------------------------------  
**    Author    ：ttyp  
**    Email     ：ttyp@21cn.com  
**    Date      ：2006-12-25
**    ==================================================================================================  
* */   
  
     function  CLASS_AUOTCOMPLETE(ID){
        
         var  me  =   this ;

         this .contain  =  document.getElementById( " __auto_complete_contain " );
         this .handle  =   null ;
         this .dropdown  =   false ;
         this .stopChange  =   false ;
         this .line  =   0 ;
         this .selectIndex  =   - 1 ;
         this .id  =   "" ;

         if (ID != null && typeof (ID) != undefined){
             this .id  =  ID;
        } else {
             this .id  =  getNewId();
        }

         function  getNewId(){
             return   " ID_ "   +  Math.random().toString().substring( 2 )
        }

         this .add  =   function (s){
             this .list[ this .list.length]  =  s;
        }

         this .sort  =   function (){
             // sort
            shellSort( this .list);
        }

         this .show  =   function (flag){

             var  contain  =  me.contain;                        
             if (contain == null || typeof (contain) == " undefined " ){
                contain  =  document.createElement( " div " );
                 var  body  =  document.body;
                 if ( typeof (body) != " undefined " ){
                    body.appendChild(contain);
                }
                me.contain  =  contain;
            }
             if (flag == undefined || flag == null ){
                flag  =   true ;
            }

             if (flag){                
                 var  w = 1000 ,h = 50 ,l,t;
                me.line  =   0 ;
                 if (me.handle != null && typeof (me.handle) != " undefined " ){
                     var  v  =  me.handle.value;
                     if (me.list != null && typeof (me.list) != " undefined " ){
                         for ( var  i = contain.childNodes.length - 1 ;i >= 0 ;i -- ){
                            contain.removeChild(contain.childNodes[i]);
                        }
                         var  index  =   0 ;
                         for ( var  i = 0 ;i < me.list.length;i ++ ){
                             if (me.list[i].indexOf(v) == 0 ){
                                 var  oo  =  document.createElement( " div " );
                                contain.appendChild(oo);
                                oo.innerText  =  me.list[i];
                                oo.style.height  =   " 16px " ;
                                oo.style.width  =   " 100% " ;
                                oo.style.overflow = " hidden " ;
                                oo.style.lineHeight = " 120% " ;
                                oo.style.cursor  =   " hand " ;
                                oo.style.fontSize  =   " 9pt " ;
                                oo.style.padding  =   " 0 2 0 2 " ;
                                oo.setAttribute( " accoc " ,me.id  +   " __auto_complete_contain " );
                                oo.setAttribute( " sIndex " ,index);
                                oo.onmouseover  =   function (){
                                     this .style.background  =   " highlight " ;
                                     this .style.color  =   " highlighttext " ;
                                     if (me.selectIndex >= 0 && me.selectIndex != this .getAttribute( " sIndex " ) * 1 ){
                                         var  oc  =  me.contain.childNodes[me.selectIndex];
                                            oc.style.background  =   " #ffffff " ;
                                            oc.style.color  =   " #000000 " ;
                                    }
                                    me.selectIndex  =   this .getAttribute( " sIndex " ) * 1 ;
                                }
                                oo.onmouseout  =   function (){
                                     this .style.background  =   " #ffffff " ;
                                     this .style.color  =   " #000000 " ;
                                }
                                oo.onclick = function (){
                                    me.stopChange  =   true ;
                                    me.handle.value  =   this .innerText;
                                    me.stopChange  =   false ;
                                    me.show( false );                                     
                                     var  r  = me.handle.createTextRange(); 
                                    r.moveStart('character',me.handle.value.length); 
                                    r.collapse( true ); 
                                    r.select();
                                    me.handle.focus();
                                    me.selectIndex  =   - 1 ;
                                }
                                oo.onfocus  =   function (){ me.handle.focus();}
                                oo.onblur  =  me.handle.onblur;
                                oo.onselectstart   =   function (){ return   false ;};
                                me.line ++ ;
                                index ++ ;
                            }
                        }

                    }
                    w  =  me.handle.getBoundingClientRect().right  -  me.handle.getBoundingClientRect().left;
                    l  =  me.handle.getBoundingClientRect().left - 2 ;
                    t  =  me.handle.getBoundingClientRect().bottom - 2 ;
                }

                h  =  (me.line > 6 ? 6 * 16 :me.line * 16 ) + 2 ;

                contain.style.position  =   " absolute " ;
                contain.style.top  =  t;
                contain.style.left  =  l;
                contain.style.width  =  w;
                contain.style.height  =  h;
                contain.style.overflowY   =   " auto " ;
                contain.style.overflowX  =   " hidden " ;      
                contain.style.backgroundColor  =   " #ffffff " ;
                contain.style.border  =   " 1px solid black " ;
                contain.setAttribute( " accoc " ,me.id  +   " __auto_complete_contain " );
                contain.onblur  =  me.handle.onblur;
                contain.onselectstart   =   function (){ return   false ;}
                contain.onfocus  =   function (){ me.handle.focus();}

                 if (me.line <= 0 ){
                    contain.style.display  =   " none " ;
                } else {
                    contain.style.display  =   "" ;
                }

            } else {
                contain.style.display  =   " none " ;
            }
             this .dropdown  =  flag;
        }

         this .filter  =   function (){
             this .show();
        }

         this .getText  =   function (){
             if (me.selectIndex >= 0 ){
                me.handle.value  =  me.contain.childNodes[me.selectIndex].innerText;
                me.show( false );
                 var  r  = me.handle.createTextRange(); 
                r.moveStart('character',me.handle.value.length); 
                r.collapse( true ); 
                r.select();
                me.handle.focus();
                me.selectIndex  =   - 1 ;
            }
        }    

         this .move  =   function (flag){
             var  osid  =  me.selectIndex;

             if (me.dropdown == false ){
                me.show( true );
            }
             if (flag){
                me.selectIndex ++ ;
            } else {
                me.selectIndex -- ;
            }
             if (me.selectIndex > me.contain.childNodes.length - 1 ){
                me.selectIndex  =   0 ;
            }
             if (me.selectIndex < 0 ){
                me.selectIndex  =  me.contain.childNodes.length - 1 ;
            }

             if (osid >= 0 ){
                 var  d  =  me.contain.childNodes[osid];
                 if (d != null && typeof (d) != " undefined " ){
                    d.style.background  =   " #ffffff " ;
                    d.style.color  =   " #000000 " ;
                }
            }
            
             if (me.selectIndex >= 0 ){
                 var  c  =  me.contain.childNodes[me.selectIndex];
                 if (c != null && typeof (c) != " undefined " ){
                    c.style.background  =   " highlight " ;
                    c.style.color  =   " highlighttext " ;
                    c.scrollIntoView( false );
                }
            }
        }

         this .setup  =   function (o){
            
             this .list  =  o.getAttribute( " autolist " ).split( " | " );
             // sort
            shellSort( this .list);
            o.setAttribute( " accoc " ,me.id  +   " __auto_complete_contain " );
             this .handle  =  o;
            o.onpropertychange  =   function (){
                 if (event.propertyName == " value " ){
                     if (me.stopChange == false ){
                        me.filter();
                    }
                }
            }
            o.ondblclick  =   function (){
                me.filter();
            }
            o.onkeydown =   function (){
                 switch (event.keyCode){
                     case   38 : // up
                        me.move( false );
                         break ;
                     case   40 : // down
                        me.move( true );
                         break ;
                     case   13 :
                        me.getText();
                         break ;
                     default :
                         // alert(event.keyCode);
                }
            }
            o.onblur = function (){
                 var  active  =  document.activeElement;
                 var  stopHide  =   false ;

                 if (active != null ){
                     var  ac  =  active.getAttribute( " accoc " );
                     if (ac != null && typeof (ac) != " undefined " && ac == me.id  +   " __auto_complete_contain " ){    
                        stopHide  =   true ;
                    }
                }
                 if (stopHide == false ){
                    me.show( false );
                }
            }
        }

         function  shellSort(arr){
             for  ( var  step  =  arr.length  >>   1 ; step  >   0 ; step  >>=   1 ){
                 for  ( var  i  =   0 ; i  <  step;  ++ i){
                     for  ( var  j  =  i  +  step; j  <  arr.length; j  +=  step){
                         var  k  =  j, value  =  arr[j];
                         while  (k  >=  step  &&  arr[k  -  step]  >  value){
                            arr[k]  =  arr[k  -  step];
                            k  -=  step;
                        }
                        arr[k]  =  value;
                    }
                }
            }
        }
    }
// -->
</ SCRIPT >
  < BODY >
 nick： < INPUT  size =30  name =q  autolist ='ba|ttyp|"|tt|typ|中国上海市|jimao8|中国|中|中国上海' >
 addr： < INPUT  size =30  name =p  autolist ='www.baidu.com|www.google.con|www.cnblogs.com/ttyp' >
  < SCRIPT  LANGUAGE ="JavaScript" >
  <!--
     var  acbar1  =   new  CLASS_AUOTCOMPLETE();
        acbar1.setup(document.all.q);
        acbar1.add( " hello " );
        acbar1.sort();

     var  acbar2  =   new  CLASS_AUOTCOMPLETE();
        acbar2.setup(document.all.p);
  // -->
  </ SCRIPT >
  </ BODY >
</ HTML >