Skip to content
This AutoCompleter script for MooTools (by Harald Kirschner - provides the functionality for text suggestion and completion. It features different data-sources (local, JSON or XML), a variety of user interactions, custom formatting, multiple selection, animations and much more.
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

AutoCompleter (v1.1)

Credit: Harald Kirschner -

Updated to work with MooTools 1.4.5 (with/without compatibility) by Jo Carter (angelsk on github) and partikule (on github)

This AutoCompleter script for MooTools provides the functionality for text suggestion and completion. It features different data-sources (local, JSON or XML), a variety of user interactions, custom formatting, multiple selection, animations and much more.


See Docs folder of project

  • Local Tag - Autocompleted tags in input fields and textareas, controlled by keyboard and mouse.
  • Local - Countries Token array is filtered on client-side, not requested from the server.
  • HTML Request
  • JSON Request


  • Use local data or Ajax request (JSON or XHTML) as data source.
  • Look and feel like the OS, visitors can use it without problems.
  • Intuitive navigation with mouse and keyboard.
  • Customizable behaviour with a lot of options and events.
  • Minimal effects to avoid noise in the workflow.

How to use


  window.addEvent('domready', function() {

      new Autocompleter.Request.JSON('fe-searchuser', '/query_user.php', {
          'postVar': 'search'


Your XHTML markup, no additional elements needed:

  <input type="text" name="search" id="fe-search"/>

And the example PHP for the database query:

  // query_user.php

  $search = $_POST['search'];
  $result = array();

  // Some simple validation
  if (is_string($search) && strlen($search) > 2 && strlen($search) < 64)
      $dbh = new PDO('mysql:host=localhost;dbname=test', $user, $pass);

      // Building the query
      $stmt = $dbh->prepare("SELECT name FROM users WHERE name LIKE ?");

      // The % as wildcard
      if ($stmt->execute(array($search . '%') ) )
          // Filling the results with usernames
          while (($row = $stmt->fetch() ) )
              $result[] = $row['name'];

  // Finally the JSON, including the correct content-type
  header('Content-type: application/json');

  echo json_encode($result); // see NOTE!


NOTE: (If you are scared of the PHP 5 example) PHP 5 is not needed, this is just an example! There are classes and native solutions for all languages, more information is available here: (List at the bottom of the page)

The response for a "Har" search would look like:



Aaron Newton wrote some documentation for CNET Clientside, describing the Options, Events and some public methods:

External Autocompleter Documentation - NOTE: This site is no longer available


MooTools JavaScript Framework

Download MooTools 1.4.5 Core with at least these modules:

  • Element.Dimensions
  • Fx.Tween
  • Request.HTML (for HTML requests)
  • Request.JSON (for JSON requests)
  • DomReady (facultative)
  • Selectors (facultative)


1.1.5 (2013-04-09) - by Jo Carter (angelsk on github)

Updated to fully work with Mootools 1.4.5 (without need of compat. mode)

1.1.4 (2013-01-03) - from

Updated to Mootools 1.4.5 (without need of compat. mode)

1.1.3 (2012-05-16) - by Jo Carter (angelsk on github)

  • Working with MooTools 1.4.5
  • Fixed: Problem with null strings
  • Added: spinner.gif for progress indicator to main styles

1.1.2 (2008-08-19)

  • Added: Option indicator for Autocompleter.Ajax, element is shown during request.
  • Added: Option indicatorClass, class-name is added during request to input.
  • Added: Option visibleChoices (default true), to scroll hidden choices into view
  • Added: Option emptyChoices, called instead of hideChoices when tokens are empty.
  • Fixed: Fixed filter loops on RegExp::test for Opera.
  • Fixed: Element::getSelectedRange returns correct positions for textareas in IE.
  • Fixed: Selected item resets correctly.
  • Fixed: Update can now also handle tokens as Hash, length check fixed.
  • Changed: BREAKING CHANGE (incl. Compatibility)! Naming conventions following MooTools 1.2
    • Autocompleter.Base to Autocompleter
    • Autocompleter.Ajax to Autocompleter.Request
    • Autocompleter.Ajax.Json/Xhtml to Autocompleter.Request.JSON/HTML
  • Changed: BREAKING CHANGE (incl. Compatibility)! Extracted Local and Request from Autocompleter.js
  • Changed: Removed Element::getOffsetParent, included in MooTools 1.2
  • Changed: Element::getCaretPosition renamed to Element::getSelectedRange
  • Changed: Added JSON and HTML Request showcases.

1.1.1 (2008-04-27)

  • Fixed: Removed orphaned trash events and added destroy for fix overlay.
  • Fixed: Added missing addChoiceEvents call to default injectChoice in Autocompleter.Ajax.Xhtml to add mouse events.

1.1 (2008-03-28)

  • Added: Support for tagging, multiple entries with configurable parsers (allowing commas, spaces …)
  • Added: Option selectMode for different select behaviours
  • Added: Option overflow for scrolling through more suggestions
  • Added: Options filter, filterCase and filterSubset, for easier locale usage, better query marks and to prepare caching feature
  • Added: Option autoSubmit to automatically submit the form on enter.
  • Added: Option forceSelect to allow select-box behaviour
  • Added: Option typeAhead for fast and simple suggestions (works best with forceSelect)
  • Changed: Updated to MooTools 1.2 dev
  • Changed: New Events for a better widget control
  • Fixed: Selection behaviour works a lot better, also for tagging
  • … and more fixes

1.0.4 (2007-05-23)

  • Fixed: Fix for & that has the Event::code of key-up (only for keypress event)
  • Changed: Added overflown option to the options object and more clean-up’s

1.0.3 (2007-05-20)

  • Official release with support for local, JSON and HTML responses


All files are © 2008-2009 by Harald Kirschner and available under the MIT License.

Contact & Discussion

For asking questions, requesting features, filing bugs or contributing other thoughts on this project use the support forum below. Before posting a new question, read through the documentation and the contributed notes for an answer. For problem reports make sure to add enough details like browser, version and a link or the relevant code.

Something went wrong with that request. Please try again.