Updated to Mootools 1.4.5 by Partikule - http://partikule.net
Credit: Harald Kirschner - http://digitarald.de/project/autocompleter/
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.
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"]
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
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)
- Updated to Mootools 1.4.5 (without need of compat. mode)
- Done by Jo Carter : https://github.com/angelsk/mootools-autocompleter
- Working with MooTools 1.4.5 (with compat. mode on)
- Fixed: Problem with null strings
- Added: spinner.gif for progress indicator to main styles
- 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.
- 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.
- 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
- 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
- Official release with support for local, JSON and HTML responses
All files are © 2008-2009 by Harald Kirschner and available under the MIT License.
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.