Mavenous

Navigation

MavSuggest v0.1.1 (A mootools more library)

MavSuggest is an autocomplete (or text suggestion) mootools library which is able to query it's results from a server-side script, or a local cache of JSON objects. The server-side script results can also be cached to allow for both a faster result, and less server traffic. There are many options to customize the text field and the search results to match the look and feel of your web-site or web application. Keyboard and mouse interactions make it as intuitive as using any other form field. Effects are optional for an even quicker response and display time.

Discussion

For now, all discussion will be located at the unofficial mootools forum. Partly because i think people will probably look there for it anyway, partly i hate setting up forums, and also because right now i'm feeling lazy. ^_^

Discuss MavSuggest on the unofficial mootools forum

Download MavSuggest

MavSuggest requires mootools v1.2+. You will need the class.MavSuggest.js, a CSS file that follows the example given below, but css class names are customizable, see the options section. If you are using a server-side script for results, see the example PHP file below as well. Neither PHP nor MySQL is required, and the server-side script can be written in any language you desire, so long as it returns a JSON object as it's output.

Get the newest Mootools Core Example CSS file MavSuggest Javascript (Uncompressed) Example PHP and MySQL script

Examples

MavSuggest Demo

Type Genre (ie; action, adventure, etc)

Selected Genres

Also view the MavSuggest vanilla example.

Usage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Mavenous MavSuggest</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" href="mavsuggest.css" />

	<style type="text/css">
	body { 
		background: #fff; 
		padding: 0 5px !important; 
		font: 101%/1.3 tahoma,verdana,arial,sans-serif; 
	}
	#music_select { width: 400px; height: 24px; font-size: 105%; }
	#music_tags { width: 550px; height: 60px; }
	</style>
	<script type="text/javascript" src="mootools-1.2.1-core.js"></script>

	<script type="text/javascript" src="class.MavSuggest.js"></script>
	<script type="text/javascript">
	var predict;
	window.addEvent('load', function() {
		predict = new MavSuggest.Request.JSON({
			'append':'music_tags',
			'elem':'music_select',
			'tabSelect': false,
			'url':'/library/public/mavsuggest/predict.php',
			'width': 'auto'
		});
	
		$('music_select').focus();
	});
	</script>
</head>

<body>

<fieldset style="margin:20px auto;width:580px;padding:18px;">
	<legend>MavSuggest Demo</legend>
	<div style="padding:0px">
		<div>

			<strong>Type Genre</strong><br />
			<input type="text" id="music_select" value="" />

		</div>
		<div>
			<strong>Selected Genres</strong><br />
			<textarea id="music_tags"></textarea>

		</div>
	</div>
</fieldset>

</body>
 </html>

Syntax

// Simplest usage syntax
new MavSuggest.Request.JSON({
	'elem':'input_element',
	'url':'/url/path/to/script.php'
});

Arguments

JSON Object containing options
- ```
(Object)
```
  An object containing the input element and additional options.

Returns

```
(Object)
```
MavSelect object
```
(null)
```
If an error occurred.

Options

```
allowDupes Boolean true
```
true to allow duplicate selections, false to prevent
```
append Element null
```
element to 'append' selected item's HTML to.
```
autoClear Boolean false
```
automatically clear element when option is chosen
```
autoTrim Boolean true
```
strips leading and trailing whitespace from value in this.element
```
class_name String suggest-opts
```
default class for menu element
```
disable Boolean false
```
whether the menu is temporarily disabled
```
elem HTMLObject null
```
HTMLObject to be used for data input. May also be an ID string
```
fxOptions Object {}
```
additional options for the Fx.Tween if useFx is true
```
localOnly Boolean false
```
only use the localOptions, do not query server for options if true
```
localOptions Boolean null
```
JSON object or array containing local options to prime cache with.
```
maxOptions Integer 10
```
max menuOptions to show at once
```
method String 'post'
```
HTTP request method. Should be either 'post' or 'get' more often than not.
```
minLength Integer 1
```
number of characters needing to be typed before suggesting
```
noResults String 'Nothing matches...'
```
display if user input returns an empty set
```
onComplete Function Function(){ ... }
```
Event that fires when request returns, and menu is built
```
onHide Function Function(){ ... }
```
Event that fires upon hiding the menu
```
onRequest Function Function(){ ... }
```
Event that fires when a request is sent to server, can be used to show wait icon.
```
onSelect Function Function(){ ... }
```
Event that fires upon user selecting an option from menu
```
onShow Function Function(){ ... }
```
Event that fires upon showing of the menu
```
relative Boolean false
```
menu is relative position to element
```
requestVar String 'request'
```
name of variable to post back to server with user input
```
selectFirst Boolean true
```
selects the first menu option on_show()
```
staticInject String 'before'
```
where to inject staticOptions if set [before, after]
```
staticOptions Object null
```
items to always show in menu
```
stylize Boolean true
```
stylize the menu items according to this.filter() if matches at beginning
```
stylizeAny Boolean false
```
if stylize = true and stylizeAny = true, stylize any matches in results
```
tabSelect Boolean false
```
if true tab key selects highlighted item, does not select, if false
```
url String ''
```
URL for requests
```
useCache Boolean true
```
use a local cache to prevent un-necessary calls to server
```
useFx Boolean true
```
use effects on showing / hiding menu, more to come, yes?
```
waitClass String 'suggest-opts-wait'
```
default class for when request is being processed by server
```
width String ''
```
width of the option menu
```
zIndex Integer 50
```
default z-index for menu

Compatibility

Tested and working with:

Firefox 2 / Firefox 3
Google Chrome 1.0.154.59
Internet Explorer 7

Changelog

v 1.0.5 - April 26th, 2009
- Initial public release version. Many bugs still to fix, and much more testing to be done.