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 >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', 'Abc', 'Abcd', 'Abcde', 'Abcdef', 'Abcdefg' ]; // Initialize the Autocompleter new Autocompleter.Local('neveropen', '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 >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', 'Abc', 'Abcd', 'Abcde', 'Abcdef', 'Abcdefg' ]; // Initialize the Autocompleter new Autocompleter.Local('neveropen', 'names', names, { // Specify the number of choices // to be displayed choices: 7 }); </ script > </ body > </ html > |
Output: