MooTools 2 Auto-Suggest
Auto Suggest for MooTools is now on SourceForge! Project tracking, feature requests, bug tracking, etc. can all be seen on the project's homepage: https://sourceforge.net/projects/autosuggestform/
This autoSuggest is built from the ground-up to provide the ability to include
key-value pairs for auto-suggest values. How is this useful?
- To allow users to enter an item into a form in the familiar format but have the form submit the system value; (like an editable select element)
- To allow users to see only a contextually-relevant subset of the valid values for a form element
- To remind users of previously-entered values
- To avoid submitting long, repetitive select lists to forms- resulting in faster page loads
- and much more!
Navigation:
- key->value autoSuggest Example
- standard autoSuggest Example
- Parameters & Options
- Installation
- Change Log
- Server-Side Examples
- License
Example with key->value pairs
This autoSuggest is built to handle key->value arrays (hashes). You will create the visible form element and the
hidden form element in the page. Here's an example which displays the 'hidden' form element as an example. Your page
can hide the 'hidden' element or not.
What's Your Favorite American State?
Hidden Form Element:
(displayed here for demonstration)
The code to implement this auto-suggest is:
window.addEvent('domready',function(){
new autoSuggest('autoSuggest/suggestionServer.php',
'suggestInput',
'hiddenOutcome',
{ 'minLength':0, }
);
});
Example with autoSuggested value only:
The autoSuggest can also be used without a hidden element. When used this way, it is much like google's auto-suggest in that there is no 'hidden' form element to be edited when an item is selected.What's Your Favorite American State?
window.addEvent('domready',function(){
new autoSuggest('autoSuggest/suggestionServer.php', 'suggestInput_alone','');
});
Parameters and Options
Only three parameters are required to instantiate an autoSuggest class:
Several options are available to customize the behavior of the autoSuggest class:
window.addEvent('domready',function(){
new autoSuggest('relative path to ajax script', 'id of visible element','id of hidden element');
});
For instances when there is no hidden element, simply submit a blank third parameter (@see standard autoSuggest Example).
Several options are available to customize the behavior of the autoSuggest class:
| Option | Default Value | Description |
|---|---|---|
| method | post | HTTP Method by which to submit AJAX request |
| minLength | 3 | the minimum length (character count in visible input) before requests are sent |
| cache | true | cache previous queries (registered per page refresh). When set to true, only one request per case-sensitive query term will be sent |
| queryTerm | query | the queryString name to be sent to the remote suggestion server (.../?query=searchForMe) |
| suggestionClass | suggestionClass | CSS class used to style the 'li' element containing each suggested item |
| highlightClass | suggestionHover | CSS class used to style the 'li' element when it is selected (hover, etc.) |
| markQuery | true | Mark the queried portion of the suggestion |
| queryValueHighlightClass | queriedValue | CSS class used to mark the queried portion of suggestion, if set to mark query |
| queryOnFocus | false | Depending on minLength, send request for suggested values when element fires a focus event |
Installing autoSuggest
To install autoSuggest, four files are required:- The autoSuggest script
- The autoSuggest stylesheet
- The MooTools 1.2 Core
- The JSON Parser
Change Log
- Version 0.9.3 (27 August 2009)
- fixed bug which caused form to be submitted on 'enter' event
- Version 0.9.2 (27 August 2009)
- Added support for item selection with 'enter' key
- Version 0.9.1 (26 August 2009)
- Added explicit support for 'tabbing'; the auto-suggest now supports familiar form tabbing action.
- Fixed bug which prevented removal of list when user clicks away (pseudo-blur)
- Added support to allow a re-query when user re-clicks into the display input
- Added support to allow a re-query when vertical arrow keys are pressed and display is not currently shown
- Version 0.9
- Initial Public Release
Serving data to autoSuggest
autoSuggest expects data from the server in a particular JSON format. Here's an example of server-side code in PHP which provides this expected format:
$sql = "SELECT id_user, username FROM users WHERE username LIKE '%$query%'";
$results = mysql_query($sql);
foreach($results as $row){
$value = array();
$value[$row['id_user']] = $row['username'];
array_push($suggestions,$value);
}
$retVal['query'] = $query;
$retVal['suggestions'] = $suggestions;
header('Content-type: application/json');
echo json_encode($retVal);
?>
Valid JSON would look like this: (query=north)
{"query":"north","suggestions":[{"state_36":"North Carolina"},{"state_37":"North Dakota"},{"state_38":"Northern Marianas Islands"}]}
