Skip to content
Related Articles

Related Articles

Improve Article

script.aculo.us Autocompleter

  • Last Updated : 31 Dec, 2020

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

paramnameIt can be used to give the name of the parameter containing the content of the text field posted at the server-side.
mincharsIt can be used to specify the number of characters after which the server-side suggestions are visible.
frequencyIt can be used to specify the time interval between internal checks for verifying whether the request to the server side should be posted.
indicatorIt can be used to display the id or reference to an element while the server request is being processed.
parametersIt can be used to pass extra parameters to the server side resource.
updateElementIt 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.
afterUpdateElementIt is a callback function which is triggered after the updateElement function has been executed.
TokensIt 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-autompleter 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

ChoicesIt can be used to specify the number of choices to display.
partialSearchIt can be used for matching the words at the beginning of the complete string in the database.
fullSearchIt can be used to enable matching anywhere within the completion strings.
partialCharsIt can be used to define the number of character that must typed before triggering the partial matching.
ignoreCaseIt 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




My Personal Notes arrow_drop_up
Recommended Articles
Page :