FAQ¶
What do you mean auto-configuration?¶
Auto-configuration means that if you set the input field to either the key or the value, MenuOptions will automatically set the correct menu_opt_key and the correct value (what is shown to user). The command below will auto-configure all the MenuOptions widgets on a page:
$('input.ui-menuoptions').menuoptions();
For example:
Assume you are using month name and month code in your Data and the code 12 represents the month December. If you set the input field to “December”, MenuOptions will automatically set menu_opt_key to the code 12. If you set the input field to 12, MenuOptions will convert that and display December, while setting the menu_opt_key to the code 12.
When I use jQuery.empty(), the widget does not get removed. How do I fix this?¶
The MenuOptions widget will detect the removal of the element it is applied to. However, calling jQuery.empty() does not appear to trigger the remove event *** so you will likely have to call the destroy () method, for example:
$(YourSelector + ' .ui-menuoptions').menuoptions('destroy');
The clear button (or ‘X’) is not aligned correctly¶
There are 2 main situations where this can happen.
The first is when an input element is added dynamically (using javascript). The clear button is positioned using the jQuery UI position() function, which requires that the element be present in the DOM and visible.
The second is when the container that surrounds the input element is being resized, as when a browser draws a table and shrinks the <TD> that contains the input element.
There are 2 workarounds for this. The first is to call MenuOptions again (with no parameters) immediately after adding the element or after the layout change.
$(YourSelector + ' input.ui-menuoptions').menuoptions();
For dynamically added elements, you can wrap the menuoptions call with a setTimeout, like this:
setTimeout(function () {
$('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" },
"Sort": []
});
}, 200 );
Sometimes, using the CSS float:right makes the X display incorrectly. In this case, using float:left will usually correct this.
How can I create a vertical scroll bar for large lists?¶
Below is an example. Whenever you specify a Height that is less than the height of the mulit-column autocomplete dropdown, a vertical scroll bar will be created.
$('input#scrolltest').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.newCode, data.type );
},
"InitialValue": { 'val': 'December'},
"Height": 200,
"Sort": []
});
This code is in quick start select demo
Why do we need another input widget?¶
- MenuOptions was created for one reason.
- To reduce - to an absolute minimum - the # of keystrokes and clicks required for data entry as well as navigation.
Features:¶
- Input masking
- 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 mulit-column autocomplete 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:
- offers the ability to combine multi column autocomplete and input mask functionality.
- 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)
- it can utilize Data from a variety of of JSON types (array, array of arrays, single object, array of objects)