Related Articles

Related Articles

script.aculo.us Autocompleter.Local partialChars Object
  • 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 partialChars option is used to set how many characters will be entered before triggering partialSearch.

Syntax:

{ partialChars: number }

Values:

  • number: This is a number which defaults to 2.

Note: For seeing the results of this option, we will have to set the value of partialSearch option to true



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

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 partial search with min 5 chars
      partialChars: 5,
      partialSearch: true
    }); 
  </script
</body
  
</html>

chevron_right


Output:

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

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 partial search with min 2 chars
      partialChars: 2,
      partialSearch: true
    }); 
  </script
</body
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :