MooSelect

An all inclusive, single- and multi-option <select> box solution replacement

MooSelect provides an all encompassing, user-friendly, clean and rapid experience when entering information into a form using a select box. Originally inpsired from the JQuery ChosenJS plugin, the MooSelect plugin ports its functionality and adds alot more … All with zero configuration both client and server side.

Last Updated

This page was last updated on Jan 19th 2012 and was first published on Oct 24th 2011

* Recent Fixes
Why not just stick to standard select boxes?
What’s so great about this plugin and what about any others?
Features
Sure Looks Amazing!
Browser Support
Requirements
How to Use
Options & Events
Methods
Issues
Demos
Download
Contact

* Recent Fixes

MooSelect has been heavily developed on for the past few months. Numerous amounts of bugs and new features have been added to the plugin so be sure to pull a fresh copy from the git repo. The following bugs have been fixed:

* Loading Messages properly show up for MooSelect.Remote
* Grouped Results on Multiple Select Boxes (both remote and normal) will filter out properly when used
* The focus/blur flicker bug has been fixed
* IE6 and IE8 will no longer crash on startup when the plugin is used
* Result and StageResult elements can now be customized
…

To Top Goto Demos Goto Download

Why not just stick to standard select boxes?

Select boxes in standard HTML forms are very limited. Not only are they very basic in functionality, the styling of <select> elements are inconsistent between browsers and operating systems. Furthermore, many of the keyboard traversal controls are unknown to users when searching for select option values … this is especially a problem for multiple value select boxes since my users are unaware of using a ctrl+click operation to select multiple option values. But, incase you haven’t noticed, they’re everywhere on the web.

To Top Goto Demos Goto Download

What’s so great about this plugin and what about any others?

This really nice thing about MooSelect is that it combines <select>, <select multiple> and AutoComplete values all together into one. This way you only need to style one of those elements, and it will stay constant across your website. You won’t need to include a 3rd party AutoComplete plugin which will behave slow and will look like it doesn’t belong with the rest of your form.

To Top Goto Demos Goto Download

Features

Here are a list of the awesome features that MooSelect provides:

Single and Multi-Option Select Box Support
Search Filtering support
Static Select Options (loaded once) and AutoComplete options (dynamically loaded)
Automatically updates the original select box values for form submission
Single select element unsetting
Possibility to allow user to enter their own values when selecting
Placeholder support
Tabbing, Focus and Blur Support
Seamlessly integrates itself into the MooTools.Validator and Yearofmoo Formular plugins
Lots of callbacks + customization of option elements and multiple-result result items

To Top Goto Demos Goto Download

Sure Looks Amazing!

Single Select Boxes
Mutiple Option Select Boxes
Validations!

To Top Goto Demos Goto Download

Browser Support

MooSelect and MooSelect.Remote work fine on all modern browsers. IE6 and IE7 still work, but may behave slowly. The following browsers have been tested:

Google Chrome, Firefox, Safari, Opera
IE6, IE7, IE8 and IE9

To Top Goto Demos Goto Download

Requirements

- All of MooTools core (1.3 or 1.4)
- MooTools more with the following components: Class.refactor, Locale
- Form.Validator is required if you wish to integrate MooSelect with Form Validation
- MooTools Formular can be used with MooSelect for awesome form validation
- … and ofcoarse MooSelect (the JS, the sprite and the CSS)

To Top Goto Demos Goto Download

How to Use

MooSelect is huge. Infact, its the biggest plugin on Yearofmoo. What you’ll need is to include the dependencies mentioned above before you can use MooSelect.

Include the Javascript files and CSS stylesheet links in your HTML document

<link rel="stylesheet" type="text/css" href="mooselect.css">
...
<select id="input-element" multiple="multiple">
  <option value="one">option one</option>
  <option value="two">option two</option>
  <option value="three">option three</option>
</select>
...
<script type="text/javascript" src="mootools-core.js"></script>
<script type="text/javascript" src="mootools-more.js"></script>
<script type="text/javascript" src="mooselect.js"></script>
<script type="text/javascript">
window.addEvent('domready',function() {
    new MooSelect('input-element');
});

For AutoComplete values that require information fetched via AJAX, then we’ll use the MooSelect.Remote class.

<link rel="stylesheet" type="text/css" href="mooselect.css">
...
<select id="input-element" multiple="multiple">
  <option value="one">static option one</option>
  <option selected="selected" value="two">static and selected option</option>
</select>
...
<script type="text/javascript" src="mootools-core.js"></script>
<script type="text/javascript" src="mootools-more.js"></script>
<script type="text/javascript" src="mooselect.js"></script>
<script type="text/javascript">
window.addEvent('domready',function() {
    new MooSelect.Remote('input-element',{
        'url' : '/path/to/ajax.php',
        'remoteOptions' : {
            'method':'GET',
            'requestParam':'q', //ajax.php?q=SEARCH
        }
    });
});

For AJAX results, the results must be in the following format (by default):

#Regular Options
[{
        'text' : 'Option Label',
        'value' : 'value'
    },{
        'text' : 'Option Label 2',
        'value' : 'value 2'
    },{
        'text' : 'Option Label 3',
        'value' : 'value 3'
}]

#Grouped Options
[{
        'group' : 'true',
        'name' : 'Group Label',
        'results' : [{
            'text' : 'Option Label 2',
            'value' : 'value 2'
        },{
            'text' : 'Option Label 3',
            'value' : 'value'
        }], {
        'group' : 'true',
        'name' : 'Group Label 2',
        'results' : [{
            'text' : 'Option Label 3',
            'value' : 'value 3'
        },{
            'text' : 'Option Label 4',
            'value' : 'value 4'
        }]
}]

To Top Goto Demos Goto Download

Options & Events

The following options and events are available with an instance of the MooSelect class:

Option	Values	Description
zIndex	Integer (default = 1000)	The css z-index property value for the expanding area (the part that folds out) of the select container.
classPrefix	String (default = ‘MooSelect-’)	This the HTML class attribute prefix that will be applied to EVERY element associated with a MooSelect instance.
className	String (default = ‘container’)	The className property for the container of the entire MooSelect element. Keep in mind that the className will joined together with the classPrefix option.
allowOtherResult	Boolean (default = false)	Whether or not the user will be allowed to type in a value that doesn’t exist in the options menu and it will be added and selected … This is useful for big admin websites that require input from a trusted source.
animations	Boolean (default = true)	Where or not animations will be used (menu fading, result fading, etc…).
fireSelectEvents	Boolean (default = false)	Whether or not any events will be fire on the original <select> element
onPopulate	Event (function)	This is fired when the options are assigned from the select element to the MooSelect instance
onResultsClear	Event (function)	When there are no more results selected.
onAddResult	Event (function)	Fired whenever an option has been selected.
onRemoveResult	Event (function)	Fired whenever an option has been removed.
onResultClick	Event (function)	Fired whenever a user clicks on a result option (applies only to multiple select elements).
onSelect	Event (function)	Fired whenever an option is selected.
onShow	Event (function)	Fired whenever the container fold out is displayed.
onHide	Event (function)	Fired whenever the container fold out is hidden.
onChange	Event (function)	Fired whenever the chosen results have changed (add or remove).
onOtherResult	Event (function)	Fired whenever an option that doesn’t exist is selected.
onNoResults	Event (function)	Fired whenever a search yields no options.

The following options and events are available with an instance of the MooSelect.Remote class:

Option	Values	Description
url	String	The URL of the page that will be accessed via AJAX.
filterResults	Boolean (default = false)	Whether or not to filter the results locally after being fetched via AJAX. If false then whatever is fetched will be displayed.
hideResultsWhenSearching	Boolean (default = true)	When searching (download) new results from ajax then will the results be showing or not?
mergeResults	Boolean (default = false)	Will the results from the previous search be merged in with the new searches?
cache	Boolean (default = true)	Cache the EXACT search with its EXACT output that was done before to avoid another ajax call
minSearchLength	Integer (default = 3)	What is the minimum amount of characters required before an ajax call will be issued
messages.loading	String (default = “Loading…”)	The default message that will appear when the ajax searching is going on.
messages.minSearch	String	The default text that will appear before the correct amount of characters is entered before searching.
remoteOptions.requestSearchParam	String (default = “q”)	The form parameter name that will be applied to the search.
remoteOptions.requestClass	Object (default = Request.JSON)	The class that will be instantiated to handle the parsing of the response fetched via AJAX.
remoteOptions.requestOptions	Hash (default = { method : ‘GET’ })	The options hash that will be used directly as the options input for the remoteOptions.requestClass when instantiated.
remoteOptions.requestResponseHandler	Function (default = null)	A custom function that can be used to parse the response of the AJAX data.
remoteOptions.onRequestComplete	Event (function)	This event will get fired when the ajax request has completed.
remoteOptions.onRequestFailure	Event (function)	This event will get fired when the ajax request has failed.
remoteOptions.onRequestEmpty	Event (function)	This event will get fired when the ajax request has no results.
remoteOptions.onRequestCancel	Event (function)	This event will get fired when the ajax request has been canceled.
remoteOptions.onRequestLoading	Event (function)	This event will get fired when the ajax request is sent.
remoteOptions.onRequestSuccess	Event (function)	This event will get fired when the ajax request is successful

To Top Goto Demos Goto Download

Methods

The following is a list of the common, public methods that can be used with MooSelect:

Method	Description
populate()	This will populate (or repopulate) the option elements from the orignal select element
setZIndex(integer)	This will set the z-index CSS property of the fold out option.
isMultiple()	Whether or not this is a multiple selection MooSelect instance.
resizeContainerBasedOnInput()	This will resize the container to the size of the original select element.
repositionResults()	This will adjust the fold out area to the correct spot.
show()	This will show (open) the select options
hide()	This will hide (close) the select options
focus()	This will open and focus on the searching field of the select element
hover()	This will hover (highlight) the container
toggle()	Show or Hide, you get the idea.
isVisible()	If the fold out area is open
isHidden()	If the fold out area is closed
getInput()	Returns the original select element
updateValues()	Updates the select element with the selected value(s).
getContainer()	Returns the container div.
hasResults()	Whether or not a result or results have been selected.
destroy()	Destroys all the elements including the container.
revert()	Destroys all elements and displays the original select element.

* The MooSelect.Remote class does not have any extra methods

To Top Goto Demos Goto Download

Formular Integration

The MooSelect plugin works well with the Yearofmoo Formular.js plugin for instant, inline form validation. There is no special code needed, just make sure that the original select element has a “required” class attribute and formular will take care of the rest.

<link rel="stylesheet" type="text/css" href="mooselect.css">
...
<form id="formular">
<select id="input-element" multiple="multiple" class="required">
  <option value="one">option one</option>
  <option value="two">option two</option>
  <option value="three">option three</option>
</select>
</form>
...
<script type="text/javascript" src="mootools-core.js"></script>
<script type="text/javascript" src="mootools-more.js"></script>
<script type="text/javascript" src="formular.js"></script>
<script type="text/javascript" src="mooselect.js"></script>
<script type="text/javascript">
window.addEvent('domready',function() {
    new MooSelect('input-element');

    new Formular('formular',{
        evaluateFieldsOnBlur : false //this needs to be disabled
    });
});

Issues

There are a few small quirks with MooSelect.

~~When parent container that has mooselect has a overflow propery assigned to it (auto or hidden) then MooSelect may be clipped within the element.~~ MooSelect now assigns the inner results element outside to the body tag so this way it won’t be clipped within the area of a parent element.
Sometimes tabbing between form elements the screen may jump back to the left or top edge. This is because the original select input element is hidden and therefore when focussed upon, the browser jumps to the leftmost edge to find it. There is a property called hideOriginalInputHorizontally which hides it to -9999px on the x-axis. This works for 99% of cases, but when your form is horizontally scrolling instead of vertically, you’ll need to set this property to false. This property is no longer required.
The tabindex is recommended since it does make tabbing through the form alot easier.

To Top Goto Demos Goto Download

Demos

A big collection of all the different select boxes.

To Top Goto Demos Goto Download

Download

The MooSelect files can be found on github.

To Top Goto Demos Goto Download

Contact

Any issues or questions can be posted on the issue tracking page found on github.

To Top Goto Demos Goto Download

year of moo

MooSelect

An all inclusive, single- and multi-option <select> box solution replacement

Last Updated

Table of Contents

* Recent Fixes

Why not just stick to standard select boxes?

What’s so great about this plugin and what about any others?

Features

Sure Looks Amazing!

Single Select Boxes

Mutiple Option Select Boxes

Validations!

Browser Support

Requirements

How to Use

Options & Events

Methods

Formular Integration

Issues

Demos

Download

Contact