menuoptions

MenuOptions    ##

#### Input masks and multi-column autocomplete combined

#### What it looks like:


#### Benefits

* Input masking
* user defined masks (via user supplied RegExp) and pre-defined masks
* error messages that explain why the input key is invalid
* hotkeys - a single key can fill a field (e.g., 't' fills in todays date in date fields)
* Multi column autocomplete
* intelligent autocomplete (characters not in any list item are automatically removed, saving keystrokes)
* mouseover filtering lets user reduce choices by moving their mouse over a filter element
* auto-configuration
* Rocker control
* Binary options (true/false, yes/no, etc) that never hide a choice
* Menus
* Built from JSON
* mouseover filtering

#### Other benefits:

* can be disabled with a simple call
* it can use data from a variety of JSON types (array, array of arrays, single object, array of objects)
* uses color highlighting to show autocomplete matches
* the value associated with with the label string is saved in the input element automatically (in the menu_opt_key - no need to manually update a hidden field)
* source data can be dynamically reloaded (no destroy-create required)
* is flexible, configurable and stays in the viewport

(See full documentation)

(See live demos)

$3

``bash
npm install menuoptions
or
git clone https://github.com/compsult/MenuOptions.git
`

(more detailed install instructions)

$3

`javascript
$('input#MdYtest').menuoptions({
"ClearBtn": true,
"Mask": "Mon DD, YYYY"
});
`

!alt text

$3

`javascript
$('input#selecttest').menuoptions({
"Data": { 1:"January",2:"February",3:"March",4:"April",5:"May", 6:"June",7:"July",
8:"August",9:"September",10:"October",11:"November",12:"December" },
"onSelect": function(mo, data) {
console.log(mo, data.newVal, data.type );
},
"Sort": [] // don't sort
});
`
!alt text

$3

See the demo

`javascript
var Data = [ {"javascript": function() { alert('Run some javascript'); }},
{"Google": "http://www.google.com"},
{"Yahoo": "http://www.yahoo.com"}];

$('button[id$="menutest"]').menuoptions({
"Data": Data;
"MenuOptionsType": "Navigate", // Navigate is for menus
});
`
!alt text

$3

See the demo

This demo illustrates using the using multiple MenuOptions controls, including the rocker control

!alt text

$3

`javascript
$('input[name=maritalstatus]').menuoptions('re_serialize', $('form#form1').serialize());
``

!alt text ")