script.aculo.us Autocompleter.Local choices Option
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>zambiatek</h1> <label for="zambiatek"> Input any name: </label> <br /> <input id="zambiatek" 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('zambiatek', '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>zambiatek</h1> <label for="zambiatek"> Input any name: </label> <br /> <input id="zambiatek" 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('zambiatek', 'names', names, { // Specify the number of choices // to be displayed choices: 7 }); </script> </body> </html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek 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!
