Open In App

script.aculo.us Autocompleter

Improve
Improve
Like Article
Like
Save
Share
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads