script.aculo.us Autocompleter
The autocompleter module allows local and server-powered autocompleting text input fields. In this article, we will show the effect of Autocompleter 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.
Creating an Ajax Autocompleter:
Syntax:
new Ajax.Autocompleter(element, container, url {options } )
Autocompleter Options:
Options
|
Description
|
paramname |
It can be used to give the name of the parameter containing the content of the text field posted at the server-side. |
minchars |
It can be used to specify the number of characters after which the server-side suggestions are visible. |
frequency |
It can be used to specify the time interval between internal checks for verifying whether the request to the server side should be posted. |
indicator |
It can be used to display the id or reference to an element while the server request is being processed. |
parameters |
It can be used to pass extra parameters to the server side resource. |
updateElement |
It is a callback function which is triggered when the user selects one of the suggestions. It then updates the text-field value with the chosen suggestion. |
afterUpdateElement |
It is a callback function which is triggered after the updateElement function has been executed. |
Tokens |
It can be used to indicate tokens that can be used to allow multiple elements to be entered in the text-field, and every element can be auto-completed individually. Tokens can consist of a single string or an array of strings. |
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< title ></ title >
< script type = "text/javascript"
src = "./javascript/prototype.js" >
</ script >
< script type = "text/javascript" src =
"./javascript/scriptaculous.js?load = effects,controls" >
</ script >
< script type = "text/javascript" >
window.onload = function () {
new Ajax.Autocompleter("searchBox",
"Result", "Suggestions.php");
};
</ script >
</ head >
< body >
< div >
< label >Search :</ label >
< input type = "text" id = "searchBox" />
< div id = "Result" ></ div >
</ div >
</ body >
</ html >
|
The suggestion in the Ajax-autocompleter are stored on a server, you can use PHP, ruby, python, node or any other language to design your server. Here we have used PHP for the same.
In the suggestions, PHP file we have used a simple HTML unordered list for suggestions
<ul>
<li>effect</li>
<li>autocomplete</li>
<li>ajax</li>
<li>php</li>
<li>paramname</li>
<li>suggestions</li>
</ul>
Output:
Creating a Local Autocompleter:
Syntax:
new Autocompleter.Local(field, container, dataSource {options});
Autocompleter Options:
Options
|
Description
|
Choices |
It can be used to specify the number of choices to display. |
partialSearch |
It can be used for matching the words at the beginning of the complete string in the database. |
fullSearch |
It can be used to enable matching anywhere within the completion strings. |
partialChars |
It can be used to define the number of character that must typed before triggering the partial matching. |
ignoreCase |
It can be used to ignore character case while matching. |
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< script type = "text/javascript"
src = "./javascript/prototype.js" >
</ script >
< script type = "text/javascript" src =
"./javascript/scriptaculous.js?load = effects,controls" >
</ script >
< script type = "text/javascript" >
window.onload = function () {
new Autocompleter.Local(
'searchBox',
'Result',
['effect', 'drag', 'drop', 'auto',
'complete', 'slider', 'sound'],
);
}
</ script >
</ head >
< body >
< div >
< label >Search :</ label >
< input type = "text" id = "searchBox" />
< div id = "Result" ></ div >
</ div >
</ body >
</ html >
|
Output:
Last Updated :
10 Apr, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...