script.aculo.us Autocompleter.Local choices Option

Last Updated : 20 Nov, 2020

The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. The Autocompleter can be used for providing auto-completion support for text fields in the webpage. The local Autocompleter is used when auto-completion options are given as an array to the Autocompleter method to display as the choices.

The Autocompleter.Local choices option is used to define the number of auto-completion choices to be offered to the user.

Syntax:

{ choices: number }

Values:

number: This option takes a number which indicates a number of choices to offer. The default value is 10.

Example 1: In this example, we have set the number of choices to 5, therefore 5 choices are offered.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- Include the required scripts -->
    <script type="text/javascript" 
        src="prototype.js"> 
    </script> 
  
    <script type="text/javascript" 
src="scriptaculous.js?load = effects,controls"> 
    </script> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <label for="GeeksforGeeks"> 
        Input any name: 
    </label> 
      
    <br /> 
    <input id="GeeksforGeeks" autocomplete="off" 
        size="40" type="text" value="" /> 
  
  
    <div class="autocomplete" id="names" 
        style="display:none"> 
    </div> 
  
    <script type="text/javascript"> 
  
        // Array to be used as choices 
        var names = [ 
            'Ab', 
            'Abc', 
            'Abcd', 
            'Abcde', 
            'Abcdef', 
            'Abcdefg' 
        ]; 
  
        // Initialize the Autocompleter 
        new Autocompleter.Local('GeeksforGeeks', 
            'names', names, { 
  
            // Specify the number of choices 
            // to be displayed 
            choices: 5 
        }); 
    </script> 
</body> 
  
</html> 

Output:

Example 2: In this example, we have set the number of choices to 7, therefore 7 choices are offered.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- Include the required scripts -->
    <script type="text/javascript" 
        src="prototype.js"> 
    </script> 
  
    <script type="text/javascript" 
src="scriptaculous.js?load = effects,controls"> 
    </script> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <label for="GeeksforGeeks"> 
        Input any name: 
    </label> 
      
    <br /> 
    <input id="GeeksforGeeks" autocomplete="off"
        size="40" type="text" value="" /> 
  
    <div class="autocomplete" id="names" 
        style="display:none"> 
    </div> 
  
    <script type="text/javascript"> 
  
        // Array to be used as choices 
        var names = [ 
            'Ab', 
            'Abc', 
            'Abcd', 
            'Abcde', 
            'Abcdef', 
            'Abcdefg' 
        ]; 
  
        // Initialize the Autocompleter 
        new Autocompleter.Local('GeeksforGeeks', 
            'names', names, { 
  
            // Specify the number of choices 
            // to be displayed 
            choices: 7 
        }); 
    </script> 
</body> 
  
</html> 