The script.aculo.us library is a cross-browser library that aims to 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 fullSearch option is used to specify whether the autocompleter will match the entered text only at the beginning of strings, or all the characters in the given array.
Syntax:
{ fullSearch: boolean }
Values:
- boolean: This is a boolean value that specifies whether the text would be matched anywhere in the string. The default value is false.
Example 1: In this example, we have set the fullSearch option to false, therefore it will not search from anywhere in the strings.
<!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',
'Abc',
'Abcd',
'Abcde',
'Abcdef',
'Abcdefg',
'Abcdefgh'
];
// Initialize the Autocompleter
new Autocompleter.Local('GeeksforGeeks',
'names', names, {
// Specify whether the strings would
// be searched at all positions
fullSearch: false
});
</script>
</body>
</html>
|
Output:
Example 2: In this example, we have to set the fullSearch option to true, therefore it may search from anywhere in the strings.
<!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',
'Abc',
'Abcd',
'Abcde',
'Abcdef',
'Abcdefg',
'Abcdefgh'
];
// Initialize the Autocompleter
new Autocompleter.Local('GeeksforGeeks',
'names', names, {
// Specify whether the strings would
// be searched at all positions
fullSearch: true
});
</script>
</body>
</html>
|
Output: