script.aculo.us Autocompleter minChars Option

Last Updated : 30 Nov, 2020

The script.aculo.us library is a cross-browser library that aims to improve the user interface of a website. The Autocompleter can be used to 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 minChars option is used to set how many characters will be entered before triggering a server-side search.

Syntax:

{ partialChars: number }

Values:

number: This is a number specifying the minimum number of characters, defaults to 1.

Example 1: In this example, we have set the minChars option to 6, so it will search only after 6 chars.

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 GeeksforGeeks',  
      'Abc GeeksforGeeks',  
      'Abcd GeeksforGeeks',  
      'Abcde GeeksforGeeks',  
      'Abcdef GeeksforGeeks',  
      'Abcdefg GeeksforGeeks',   
    ];  
  
    // Initialize the Autocompleter  
    new Autocompleter.Local('GeeksforGeeks',  
      'names', names, {  
  
      // Specify minimum chars 
      // to trigger a search 
      minChars: 6 
    });  
  </script>  
</body>  
  
</html>

Output:

Example 2: In this example, we have set the minChars option to 3, so it will search only after 3 chars.

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 GeeksforGeeks',  
      'Abc GeeksforGeeks',  
      'Abcd GeeksforGeeks',  
      'Abcde GeeksforGeeks',  
      'Abcdef GeeksforGeeks',  
      'Abcdefg GeeksforGeeks',   
    ];  
  
    // Initialize the Autocompleter  
    new Autocompleter.Local('GeeksforGeeks',  
      'names', names, {  
  
      // Specify minimum chars 
      // to trigger a search 
      minChars: 3 
    });  
  </script>  
</body>  
  
</html>