Wednesday, July 3, 2024
HomeLanguagesJavascriptscript.aculo.us Autocompleter minChars Option

script.aculo.us Autocompleter minChars Option

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>neveropen</h1
  
  <label for="neveropen"
    Input any name: 
  </label
    
  <br /> 
  <input id="neveropen" 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 neveropen', 
      'Abc neveropen', 
      'Abcd neveropen', 
      'Abcde neveropen', 
      'Abcdef neveropen', 
      'Abcdefg neveropen',  
    ]; 
  
    // Initialize the Autocompleter 
    new Autocompleter.Local('neveropen', 
      '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>neveropen</h1
  
  <label for="neveropen"
    Input any name: 
  </label
    
  <br /> 
  <input id="neveropen" 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 neveropen', 
      'Abc neveropen', 
      'Abcd neveropen', 
      'Abcde neveropen', 
      'Abcdef neveropen', 
      'Abcdefg neveropen',  
    ]; 
  
    // Initialize the Autocompleter 
    new Autocompleter.Local('neveropen', 
      'names', names, { 
  
      // Specify minimum chars
      // to trigger a search
      minChars: 3
    }); 
  </script
</body
  
</html>


Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!

Calisto Chipfumbu
Calisto Chipfumbuhttp://cchipfumbu@gmail.com
I have 5 years' worth of experience in the IT industry, primarily focused on Linux and Database administration. In those years, apart from learning significant technical knowledge, I also became comfortable working in a professional team and adapting to my environment, as I switched through 3 roles in that time.
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments