MenuOptions - input masks combined with multi-column autocomplete

What it looks like:

alt text


                        npm install menuoptions
                                -- or --
                        git clone
(more detailed install instructions


Other benefits:

  • offers the ability to combine multi column autocomplete and input mask functionality

  • uses color highlighting to show autocomplete matches

  • it can utilize data from a variety of JSON types (array, array of arrays, single object, array of objects)

  • the value associated with the label string is saved in the input element automatically (in the menu_opt_key - no need to manually update a hidden field)


1 - MenuOptions documentation has been moved to ReadTheDocs

2 - It is strongly advised to use the latest release of MenuOptions, for latest features and bug fixes

Getting started with input masks

See the demo

                            "ClearBtn": true,
                            "Mask": "Mon DD, YYYY"
input mask

Getting started with a simple multi-column autocomplete

See the demo

                    var Data = [ "January","February","March","April","May","June","July",
                                "August","September","October","November","December" ];

                        "Data": Data
simple multi-column autocomplete example

Getting started with a simple menu

See the demo

                    var Data =  [ {"javascript": function() { alert('Run some javascript'); }},
                                {"Google": ""},
                                {"Yahoo": ""}];

                                "Data": Data,
                                "MenuOptionsType": "Navigate", // Navigate is for menus
simple menu example

Autocomplete with images

See the demo

autocomplete with images

Mouseover filtering with dividers

See the demo

mouseover with dividers

Dynamic reloading of a MenuOptions multi-column autocomplete

See the demo

In this case, the user selects a start time and the end time will be modified to only display
the start time plus 1 hour and 30 minutes later

dynamic reload of MenuOptions multi-column autocomplete

Using MenuOptions with jQuery's serialize

See the demo

If you load MenuOptions multi-column autocomplete using an object, the value will be written into the 'menu_opt_key' attribute. jQuery's serialize will not pick up the value of a MenuOptions multi-column autocomplete (menu_opt_key).

To account for this, wrap serialize() with re_serialize, like this:

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

Multiple multi-column autocomplete on a page demo

See the demo

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

Multiple Selects