Other versions:

AutoCompleter (v1.1)

Project AutoCompleter Showcase 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.


Showcases

Features

  • 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

With JSON + PHP5/PDO

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:

<?php
// 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: JSON.org (List at the bottom of the page)

The response for a “Har” search would look like:

["Harald","Haribald","Harold","Harry","Haribald"]

Documentation

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

External Autocompleter Documentation

Requirements

MooTools JavaScript Framework

Download MooTools 1.2 Core with at least these modules:

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

Download

Changelog

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

License

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.

You can contact me for non-support related notes.

Professional Support

I am available for hire if you look for professional and swift help. I can come to your rescue for installation, customization or extending the existing source for your needs.

Share it: Stumble it!Digg This!del.icio.us (No Posts)

discussion by DISQUS No Comments

Please use the support forums for discussing the project, asking questions or posting bug-fixes!

Sort:
No Comments
  • First
  • ‹ Prev
  • Next ›
  • Last
No Comments
  • First
  • ‹ Prev
  • Next ›
  • Last

Post your comment

Please use the support forums for discussing the project, asking questions or posting bug-fixes!


Internet Consultant & Contractor

I'm available to combine forces with you and your team to find the most simple, elegant and convenient web solutions . I await your call.

If you just like my work and want to say Thank You, donate via PayPal or Amazon Wish List.

Developer Resources & Tools