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

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

应用一

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

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

 

CodeSCRIPT 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();"     />      

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

 

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