script.aculo.us Autocompleter.Local choices Option
Last Updated :
20 Nov, 2020
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 >
< 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',
'Abc',
'Abcd',
'Abcde',
'Abcdef',
'Abcdefg'
];
// Initialize the Autocompleter
new Autocompleter.Local('GeeksforGeeks',
'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 >
< 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',
'Abc',
'Abcd',
'Abcde',
'Abcdef',
'Abcdefg'
];
// Initialize the Autocompleter
new Autocompleter.Local('GeeksforGeeks',
'names', names, {
// Specify the number of choices
// to be displayed
choices: 7
});
</ script >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...