MenuOptions - input masks and multi-column autocomplete combined

Masks types

Mask for YYYYMMDD
(hotkey t = today, help on bottom)
Mask for Mon DD, YYYY
(hotkey t = today, help on top)
Mask for time
(hotkey n = now, bg color disabled)
Mask for Phone number
(help on right)
Mask for money
Credit card expiration
User supplied RegExp
'^[ A-Za-z\-.,]*$' (Help suppressed)




Code


                
    $('input#MdYtest').menuoptions({ 
         "onSelect": function(mo, data) {  
             console.log(mo, data.newVal, data.newCode, data.type );   
         },  
        "ClearBtn": true,
        "Help": 'top',
        "Mask": "Mon DD, YYYY"
        /*--  "InitialValue": { val: "Feb 27, 2016"}  --*/
    });  
    $('input#MdYtest2').menuoptions({ "ClearBtn": true, "Help": 'bottom', "Mask": "Mon DD, YYYY" });
    $('input#MdYtest3').menuoptions({ "ClearBtn": true, "Help": 'right', "Mask": "Mon DD, YYYY" });
    $('input#YMDtest').menuoptions({ 
        "onSelect": function(mo, data) {  
             console.log(mo, data.newVal, data.newCode, data.type );   
         },  
        "ClearBtn": true,
        "Help": 'bottom',
        "Mask": "YYYYMMDD"
    });  
    $('input#YMDtest2').menuoptions({ "ClearBtn": true, "Help": 'top', "Mask": "YYYYMMDD" });
    $('input#YMDtest3').menuoptions({ "ClearBtn": true, "Help": 'right', "Mask": "YYYYMMDD" });
    $('input#Phonetest').menuoptions({ 
        "onSelect": function(mo, data) {  
             console.log(mo, data.newVal, data.newCode, data.type );   
         },  
        "ClearBtn": true,
        "Help": 'right',
        "Mask": "USphone"
    });  
    $('input#Phonetest2').menuoptions({ "ClearBtn": true, "Help": 'bottom', "Mask": "USphone" });
    $('input#Phonetest3').menuoptions({ "ClearBtn": true, "Help": 'top', "Mask": "USphone" });
    $('input#Timetest').menuoptions({
        "Data": ['12:00 PM', '12:30 PM', '01:00 PM','01:30 PM', '02:00 PM','02:30 PM', '03:00 PM','03:30 PM', '04:00 PM', '04:30 PM'],
        "ColumnCount": 2,
        "Sort":[],
        "onSelect": function(mo, data) {  
             console.log(mo, data.newVal, data.newCode, data.type );   
         },  
        "ClearBtn": true,
        "Mask" : 'HH:MM AM',
        "Help": 'right',
        'DisableHiLiting': true
    });  
    $('input#Timetest2').menuoptions({ "ClearBtn": true, "Help": 'right', "Mask": "HH:MM AM" });
    $('input#Timetest3').menuoptions({ "ClearBtn": true, "Help": 'bottom', "Mask": "HH:MM AM" });
    $('input#Moneytest').menuoptions({
        "onSelect": function(mo, data) {  
             console.log(mo, data.newVal, data.newCode, data.type );   
         },  
        "Justify": 'right',
        "ClearBtn": true,
        "Help": 'top',
        "Mask" : 'Money'
    });  
    $('input#Moneytest2').menuoptions({ "ClearBtn": true, "Help": 'bottom', "Mask": "Money", "Justify": 'right' });
    $('input#Moneytest3').menuoptions({ "ClearBtn": true, "Help": 'right', "Mask": "Money", "Justify": 'right' });
    $('input#CrdCdExp').menuoptions({
        "onSelect": function(mo, data) {  
             console.log(mo, data.newVal, data.newCode, data.type );   
         },  
        "Justify": 'left',
        "ClearBtn": true,
        "Help": 'top',
        "Mask" : 'CredCdExp'
    });  
    $('input#CrdCdExp2').menuoptions({ "ClearBtn": true, "Help": 'bottom', "Mask": "CredCdExp", "Justify": 'left' });
    $('input#CrdCdExp3').menuoptions({ "ClearBtn": true, "Help": 'right', "Mask": "CredCdExp", "Justify": 'left' });
    $('input#DrName').menuoptions({
        "onSelect": function(mo, data) {  
             console.log(mo, data.newVal, data.newCode, data.type );   
         },  
        "Justify": 'left',
        "ClearBtn": true,
        "Help": 'None',
        "Mask" : {"Whole":'^[ A-Za-z\-.,]*$', HelpMsg:"Doctor Name"}
    });  
    $('input#DrName2').menuoptions({ "ClearBtn": true, "Help": 'bottom', "Mask": {"Whole":'^[ A-Za-z\-.,]*$', HelpMsg:"Doctor Name"}, "Justify": 'left' });
    $('input#DrName3').menuoptions({ "ClearBtn": true, "Help": 'right', "Mask": {"Whole":'^[ A-Za-z\-.,]*$', HelpMsg:"Doctor Name"}, "Justify": 'left' });
   /*--  END_JAVASCRIPT  --*/
   
            

            
        <div id=main_column class="col-md-10 col-xs-10">
        <div class="row" style="border: 0px solid green;">
          <div class="col-md-9 col-xs-9" style='height:70px;border: 0px solid silver;width:1000px;'>
            <div class="row" style='height:70px; border: 0px solid silver;'></div>
            <div class="row" style='height:70px'>
                <div class="col-md-3 col-xs-3 text-right" style='height:70px;width:240px;border: 0px solid silver;'>
                    <span class=lg>Mask for YYYYMMDD</span><br>
                    <span class=sub>(hotkey t = today, help on bottom)</span>
                </div>
                <div class="col-md-3 col-xs-3 text-left" style='height:70px;width:240px;border: 0px solid silver;'>
                    <input class='underlined'   style='width:124px' type=text name=MdY id='YMDtest'  placeholder='YYYYMMDD'>
                </div>
                <div class="visible-lg col-lg-3" style='height:70px;width:240px;border: 0px solid silver;'>
                    <input class='form-control'   style='width:140px !important' type=text name=MdY id='YMDtest2'  placeholder='YYYYMMDD'>
                </div>
                <div class="visible-lg col-lg-3" style='height:70px;width:240px;border: 0px solid silver;'>
                    <input style='width:124px !important' type=text name=MdY id='YMDtest3'  placeholder='YYYYMMDD'>
                </div>
            </div>
            <div class="row" style='height:70px'>
                <div class="col-md-3 col-xs-3 text-right" style='height:70px;width:240px;border: 0px solid silver;'>
                    <span class=lg>Mask for Mon DD, YYYY</span><br>
                    <span class=sub>(hotkey t = today, help on top)</span>
                </div>
                <div class="col-md-3 col-xs-3 text-left" style='height:70px;width:240px;border: 0px solid silver;'>
                    <input class='underlined'   style='width:124px' type=text name=YMD id='MdYtest'  placeholder='Mon DD, YYYY' >
                </div>
                <div class="visible-lg col-lg-3" style='height:70px;width:240px;border: 0px solid silver;'>
                    <input class='form-control'   style='width:140px !important' type=text name=YMD id='MdYtest2'  placeholder='Mon DD, YYYY' >
                </div>
                <div class="visible-lg col-lg-3" style='height:70px;width:240px;border: 0px solid silver;'>
                    <input style='width:124px !important' type=text name=YMD id='MdYtest3'  placeholder='Mon DD, YYYY' >
                </div>
            </div>
            <div class="row" style='height:70px'>
                <div class="col-md-3 col-xs-3 text-right" style='height:70px;width:240px;border: 0px solid silver;'>
                    <span class=lg>Mask for time</span><br>
                    <span class=sub>(hotkey n = now, bg color disabled)</span>
                </div>
                <div class="col-md-3 col-xs-3 text-left" style='height:70px;width:240px;border: 0px solid silver;'>
                    <input class='underlined'   style='width:124px' type=text name=time id='Timetest'  placeholder='HH:MM AM' >
                </div>
                <div class="visible-lg col-lg-3" style='height:70px;width:240px;border: 0px solid silver;'>
                    <input class='form-control'   style='width:140px !important' type=text name=time id='Timetest2'  placeholder='HH:MM AM' >
                </div>
                <div class="visible-lg col-lg-3" style='height:70px;width:240px;border: 0px solid silver;'>
                    <input style='width:124px !important' type=text name=time id='Timetest3'  placeholder='HH:MM AM' >
                </div>
            </div>
            <div class="row" style='height:70px'>
                <div class="col-md-3 col-xs-3 text-right" style='height:70px;width:240px;border: 0px solid silver;vertical-align: middle'>
                    <span class=lg>Mask for Phone number</span><br>
                    <span class=sub>(help on right)</span>
                </div>
                <div class="col-md-3 col-xs-3 text-left" style='height:70px;width:240px;border: 0px solid silver;'>
                    <input class='underlined'   style='width:124px' type=text name=phone id='Phonetest'  placeholder='(999) 999-9999' >
                </div>
                <div class="visible-lg col-lg-3" style='height:70px;width:240px;border: 0px solid silver;'>
                    <input class='form-control'   style='width:140px !important' type=text name=phone id='Phonetest2'  placeholder='(999) 999-9999' >
                </div>
                <div class="visible-lg col-lg-3" style='height:70px;width:240px;border: 0px solid silver;'>
                    <input style='width:124px !important' type=text name=phone id='Phonetest3'  placeholder='(999) 999-9999' >
                </div>
            </div>
            <div class="row" style='height:70px'>
                <div class="col-md-3 col-xs-3 text-right" style='height:70px;width:240px;border: 0px solid silver;'>
                    <span class=lg>Mask for money</span><br>
                </div>
                <div class="col-md-3 col-xs-3 text-left" style='height:70px;width:240px;border: 0px solid silver;'>
                    <input class='underlined'   style='width:124px' type=text name=money id='Moneytest'  placeholder='$0,000.00' >
                </div>
                <div class="visible-lg col-lg-3" style='height:70px;width:240px;border: 0px solid silver;'>
                    <input class='form-control'   style='width:140px !important' type=text name=money2 id='Moneytest2'  placeholder='$0,000.00' >
                </div>
                <div class="visible-lg col-lg-3" style='height:70px;width:240px;border: 0px solid silver;'>
                    <input style='width:124px !important' type=text name=money3 id='Moneytest3'  placeholder='$0,000.00' >
                </div>
            </div>
            <div class="row" style='height:70px'>
                <div class="col-md-3 col-xs-3 text-right" style='height:70px;width:240px;border: 0px solid silver;'>
                    <span class=lg>Credit card expiration</span><br>
                </div>
                <div class="col-md-3 col-xs-3 text-left" style='height:70px;width:240px;border: 0px solid silver;'>
                    <input class='underlined'   style='width:72px' type=text id='CrdCdExp'  placeholder='MM/YY' >
                </div>
                <div class="visible-lg col-lg-3" style='height:70px;width:240px;border: 0px solid silver;'>
                    <input class='form-control'   style='width:76px !important' type=text id='CrdCdExp2'  placeholder='MM/YY' >
                </div>
                <div class="visible-lg col-lg-3" style='height:70px;width:240px;border: 0px solid silver;'>
                    <input style='width:72px !important' type=text id='CrdCdExp3'  placeholder='MM/YY' >
                </div>
            </div>
            <div class="row" style='height:70px'>
                <div class="col-md-3 col-xs-3 text-right" style='height:70px;width:240px;border: 0px solid silver;'>
                    <span class=lg>User supplied RegExp</span><br>
                    <span class=sub>'^[ A-Za-z\-.,]*$'  (Help suppressed)</span>
                </div>
                <div class="col-md-3 col-xs-3 text-left" style='height:70px;width:240px;border: 0px solid silver;'>
                    <input class='underlined'   style='width:124px' type=text id='DrName'  placeholder='Doctor Name' >
                </div>
                <div class="visible-lg col-lg-3" style='height:70px;width:240px;border: 0px solid silver;'>
                    <input class='form-control'   style='width:124px !important' type=text id='DrName2'  placeholder='Doctor Name' >
                </div>
                <div class="visible-lg col-lg-3" style='height:70px;width:240px;border: 0px solid silver;'>
                    <input style='width:124px !important' type=text id='DrName3'  placeholder='Doctor Name' >
                </div>
            </div>
          </div>
        
        

            
  <!--//  <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">
  <style>  
    span.lg { font-size: 1.2em; line-height:150%; color:gray; }  
    span.sub { font-size: .9em; line-height:100%; color:gray; }  
  </style>