两种对输入框自动完成的方法

在网页应用中,当你在输入组件里面输入的时候,很想让页面自动带出一些要输入的值,这就是自动完成功能.

应用一

比如我要在一个TextBox输入框里输入Red,当我输入R的时候,Red自动带出来.

代码分两部分,一部分是客户端的JAVASCRIPT的处理程式

 

Code SCRIPT language = JScript type = text / javascript> 
/* ***********TextBox自動完成功能*********** */
     var  isOpera  =  navigator.userAgent.indexOf( " Opera " )  >  - 1 ; 
     var  isIE  =  navigator.userAgent.indexOf( " MSIE " )  >  1  &&  ! isOpera; 
     var  isMoz  =  navigator.userAgent.indexOf( " Mozilla/5. " )  ==  0  &&  ! isOpera; 
     function  textboxSelect (oTextbox, iStart, iEnd) 
    { 
         switch (arguments.length) 
        { 
             case  1 : 
                oTextbox.select(); 
                 break ; 
             case  2 : 
                iEnd  =  oTextbox.value.length; 
             case  3 : 
                 if  (isIE) 
                { 
                     var  oRange  =  oTextbox.createTextRange(); 
                    oRange.moveStart( " character " , iStart); 
                    oRange.moveEnd( " character " ,  - oTextbox.value.length  +  iEnd); 
                    oRange.select(); 
                } 
                 else  if  (isMoz)
                { 
                    oTextbox.setSelectionRange(iStart, iEnd); 
                } 
        } 
        oTextbox.focus(); 
    } 

     function  autocompleteMatch (sText, arrValues) 
    { 
         for  ( var  i = 0 ; i  <  arrValues.length; i ++ ) 
        { 
             if  (arrValues[i].indexOf(sText)  ==  0 ) 
            { 
                 return  arrValues[i]; 
            } 
        } 
         return  null ; 
    } 
     function  autocomplete(oTextbox, oEvent, arrValues) 
    { 
         switch  (oEvent.keyCode) 
        { 
             case  38 :  // up arrow 
             case  40 :  // down arrow 
             case  37 :  // left arrow 
             case  39 :  // right arrow 
             case  33 :  // page up 
             case  34 :  // page down 
             case  36 :  // home 
             case  35 :  // end 
             case  13 :  // enter 
             case  9 :  // tab 
             case  27 :  // esc 
             case  16 :  // shift 
             case  17 :  // ctrl 
             case  18 :  // alt 
             case  20 :  // caps lock 
             case  8 :  // backspace 
             case  46 :  // delete 
                 return  true ; 
                 break ; 
             default : 
                 var  iLen  =  oTextbox.value.length; 
                 var  sMatch  =  autocompleteMatch(oTextbox.value, arrValues); 
                 if  (sMatch  !=  null ) { 
                oTextbox.value  =  sMatch; 
                textboxSelect(oTextbox, iLen, oTextbox.value.length); 
        } 
         return  false ; 
    } 
} 
< / SCRIPT> 

以上是处理方法

如下数组就是你想具有自动完成的字符串.这个可以放在服务器端写,也可以直接放在客户端

 

< SCRIPT >  
var  arrValues  =  [ " OK " ,  " NG " , " RED " ]; 
< / SCRIPT> 

 

以上所述,就完成了自动带出的功能.

方式二:

此种自动完成和上面有很大不同,上面的方式是在输入框里直接带出内容,而下面的方式 是在输入框下带出下拉列表框让你去选择.

这个是http://www.never-online.net/提供的解决方案,看起来不错.

主要代码如下:

 

  < script type = " text/javascript "  src = " neverModules-autoComplete.js " >< / script>
     < script type = " text/javascript " >
     // <![CDATA[
      completeDataSource  =  [
        {
           ' text ' : ' never-online ' ,
           ' content ' : ' BlueDestiny[a]126.com ' ,
           ' hints ' : ' http://www.never-online.net '
        },
        {
           ' text ' : ' google earth ' ,
           ' content ' : ' BlueDestiny[a]126.com ' ,
           ' hints ' : ' http://www.never-online.net '
        },
        {
           ' text ' : ' ajax ' ,
           ' content ' : ' BlueDestiny[a]126.com '
        },
        {
           ' text ' : ' blueDestiny ' ,
           ' content ' : ' BlueDestiny[a]126.com '
        },
        {
           ' text ' : ' never-online ' ,
           ' content ' : ' BlueDestiny[a]126.com ' ,
           ' hints ' : ' http://www.never-online.net '
        },
        {
           ' text ' : ' google earth ' ,
           ' content ' : ' BlueDestiny[a]126.com ' ,
           ' hints ' : ' http://www.never-online.net '
        },
        {
           ' text ' : ' ajax ' ,
           ' content ' : ' BlueDestiny[a]126.com '
        },
        {
           ' text ' : ' blueDestiny ' ,
           ' content ' : ' BlueDestiny[a]126.com '
        },
        {
           ' text ' : ' never-online ' ,
           ' content ' : ' BlueDestiny[a]126.com ' ,
           ' hints ' : ' http://www.never-online.net '
        },
        {
           ' text ' : ' google earth ' ,
           ' content ' : ' BlueDestiny[a]126.com ' ,
           ' hints ' : ' http://www.never-online.net '
        },
        {
           ' text ' : ' ajax ' ,
           ' content ' : ' BlueDestiny[a]126.com '
        },
        {
           ' text ' : ' blueDestiny ' ,
           ' content ' : ' BlueDestiny[a]126.com '
        }
      ];
      
       var  autoComplete  =  null ;
      onload  =  function  pageLoadHdle() {
         var  configuration  =  {
          instanceName:  " autoComplete " ,
          textbox: document.getElementById( " demo " ),
          dataSource: completeDataSource
        };

        autoComplete  =  new  neverModules.modules.autocomplete(configuration);
        
        autoComplete.callback  =  function  (autocompleteValue, autocompleteContent) {
          document.getElementById( " tx " ).value  =
           " Your text is:[ "  + autocompleteValue +  " ]; the content is:[ "  + autocompleteContent +  " ] "  ;
        }
        
        autoComplete.useContent  =  true ;
                autoComplete.useSpaceMatch  =  true ;
                autoComplete.ignoreWhere  =  true ;
        autoComplete.create();
        autoComplete.expandAllItem();

        autoComplete.showAnimateImage( " images/indicator.gif " );

        window.setTimeout(
           function  closeAnimateImageAfter1seconds() { 
            autoComplete.closeAnimateImage();
          },  1000 );
      }
     // ]]>
     < / script>

 

然后是对输入控件加上事件

  < input id = " demo "  
      onkeyup = " autoComplete.hdleEvent(event) "  
      ondblclick = " autoComplete.expandAllItem(); "       / >      

下面附上原代码http://files.cnblogs.com/zzyyll2/neverModules-autocomplete.rar

 

以上是两种对输入框自动完成的方法,