MenuOptions - input masks and multi-column autocomplete combined

All MenuOptions widgets





Code


                
     function menus () {
        var Menu_w_Dividers = {  
                    'Search'  :'divider' , 
                    'Google'  :'http://www.google.com' , 
                    'Yahoo'  :'http://www.yahoo.com' , 
                    'Business'  :'divider' , 
                    'CNBC'  :'http://www.cnbc.com' , 
                    'MarketWatch' :'http://www.MarketWatch.com' 
        };

        $('button[id="menu_divs_filts"]').menuoptions({ 
            'MenuOptionsType': 'Navigate', 
            'Data': Menu_w_Dividers,
            'Filters': [{ 'Biz' : '^(CNBC|MarketWatch)'}, {'Search' :'^(Google|Yahoo)'} ], 
            'ShowDownArrow': 'white',
            'Sort': [], 
        }); 
    }
    function rockers() {
        $('input#on_off').menuoptions({"Sort": [], 
                "Data": { 1: "On", 2:"Off" }, "MenuOptionsType":"Rocker",
                "onSelect": function(mo, data) {  console.log(data); }
        }); 
        $('input#MaleFemale').menuoptions({"Sort": [], 
                "Data": { 'M': "Male", 'F':"Female" }, "MenuOptionsType":"Rocker",                    
                    "onSelect": function(mo, data) { console.log(data); }                                                                       
                });                                                       
        $('input#TrueFalse').menuoptions({"Sort": [], 
                "Data": { 'T': "True", 'F':"False" }, "MenuOptionsType":"Rocker",                    
                    "onSelect": function(mo, data) { console.log(data); }                                                                       
                });                                                       
        $('input#YesNo').menuoptions({"Sort": [], 
                "Data": { 'Y': "Yes", 'N':"No" }, "MenuOptionsType":"Rocker",                    
                    "onSelect": function(mo, data) { console.log(data); }                                                                       
                });                                                       
        $('input#DisableEnable').menuoptions({"Sort": [], 
                "Data": [ 'Disable','Enable' ], "MenuOptionsType":"Rocker", 'Disabled':false,
                "onSelect": function(mo, data) { DisableEnable(data); }                                                                       
                });                                                       
    }
    function DisableEnable ( data ) {
        if ( /enable/i.test(data.newVal)) {
            $('input#on_off,input#MaleFemale,input#TrueFalse,input#YesNo,button[id="menu_divs_filts"],input#starttime').menuoptions({'Disabled':false});
        } else {
            $('input#on_off,input#MaleFemale,input#TrueFalse,input#YesNo,button[id="menu_divs_filts"],input#starttime').menuoptions({'Disabled':true});
        }
    }
    function get_hh_mm ( value ) {
        var hh = new Date(value).getHours(),
            ampm = "PM",
            mm = new Date(value).getMinutes();
        if ( hh < 12 ) { ampm = "AM";
        } else { hh -= 12; }
        hh = ( hh === 0 ) ? "12" : hh;
        hh = ( hh < 10 ) ? "0" + hh : hh;
        mm = ( mm < 10 ) ? "0" + mm : mm;
        return hh + ":" + mm + " " + ampm;
    }
    var AddApptMins = function ( StartTime, Duration ) {
        var epoch_time = new Date("Jan 1, " + new Date().getFullYear() + " " + StartTime).getTime() + Duration * 60000;
        return get_hh_mm ( epoch_time );
    }
    function init() {
        var last_time = ""
            earliest_time = '08:00 AM',
            latest_time = '09:40 PM';
        $("body").data("alltimes", [ earliest_time ]);
        for (var t = 0; t <= 80; t += 1) {  
            last_time = AddApptMins($("body").data("alltimes")[$("body").data("alltimes").length-1], 20);
            $("body").data("alltimes").push(last_time);   
            if ( last_time === latest_time ) { break; }
        }  
        $('input#starttime').menuoptions({
                                        "Data": $("body").data("alltimes"),
                                        "Filters": [{'AM':'AM'},{'PM':'PM'}],
                                        "ClearBtn": true,
                                        "onSelect": function(e, data) { 
                                            console.log(e, data.newVal, data.newCode, data.type );
                                        }, 
                                        "ShowAt": 'bottom',
                                        "DisableHiLiting": false, // default is no border hi liting
                                        "ColumnCount": 3,
                                        "Width": 240,
                                        "Height": 200,
                                        "Mask" : 'HH:MM AM',
                                        "Sort": []
                                        });
    }
    init();
    menus();
    rockers();
   
            

            
        <div id=main_column class="col-md-10 col-xs-10">
            <div class="row">
                <div class="col-md-4 col-xs-12" style="height:120px">
                    <button type="button" id="menu_divs_filts" class="btn btn-primary">Menu with dividers & filters</button>
                </div>
                <div class="col-md-3 col-xs-12 text-left" style="height:120px; ">
                    <input type=text class="form-control" style='width:140px' name=starttime id='starttime' placeholder='Start time' >
                </div>
                <div class="col-md-3 col-xs-12 text-right" style="height:180px">
                    <div style="height:50px;">
                        <input type=text name=YesNo id='YesNo'>
                    </div>
                    <div style="height:50px;">
                        <input type=text name=TrueFalse id='TrueFalse'>
                    </div>
                    <div style="height:50px;">
                        <input type=text name=MaleFemale id='MaleFemale'>
                    </div>
                    <div style="height:50px;">
                        <input type=text name=on_off id='on_off' >
                    </div>
                </div>
          </div> <!--  column 2 (main)  -->
          
        

            
 <!--//  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>  //-->
 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>  
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">  
 <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  <script src="../dist/js/jquery.menuoptions.js?v_1820"></script>
  <link rel="stylesheet" href="../dist/css/menuoptions.css?v_1820">
  <link rel="stylesheet" type="text/css" href="css/style.css?v_2339">