In this article, we will show the effect of Autocompleter Tokens by using JavaScript library named as script.aculo.us, which helps to autocomplete the text fields according to the given suggestions in the form of an array. We can add a list of suggestions as well.
Please refer to script.aculo.us to download libraries or pre-compiled files for implementation. Also, take care of proper file paths otherwise the code will not work.
Syntax:
new Autocompleter.Local(field, container, dataSource [ , options ] );
Parameters:
- field: Element name of the text field.
- container: Container element name which gives suggestions.
- datasource: Data source can be a single text or array of strings.
Demonstration: In this example, we have used the function in HTML code. We have written a small JavaScript function that runs when the windows load and use the Autocompleter Tokens method of this library. By typing anything in the search box we can get the suggestions.
To see the effect, first, install the library and then open this program in the local environment.
HTML
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="prototype.js"> </script> <script type="text/javascript" src="scriptaculous.js?load = effects"> </script> <script type="text/javascript"> window.onload = function () { new Autocompleter.Local( 'autoCompleteTextField', 'autoCompleteList', ['abcxyz', 'bcdmnop', 'neveropen', 'neveropenfor', 'neveropen'], { ignoreCase: false } ); } </script> </head> <body> <h3>Welcome to GeeksForGeeks</h3> <p> You can type anything and get the suggestions </p> <div> <label>Search:</label> <input type="text" id="autoCompleteTextField" /> <div id="autoCompleteList"></div> </div> </body> </html> |
Output:
