MenuOptions - input masks and multi-column autocomplete combined

Using re_serialize()

(serialize() will not pick up "menu_opt_key" information)

Choose from the drop downs and click "See results"





 
 
 
 




The code below takes the output from serialize() and turns text values that the user selected into key codes.

var new_get_str = $('input[name=t3]').menuoptions('re_serialize', $('form#tst').serialize());

How it works:

If you load a MenuOptions select control with an object, like the code below:

                
    PayMethod   = { 1: "American Express", 2: "Visa", 3: "Mastercard", 4:"Discover", 5:"Check", 
                    6:"PayPal", 7:"Cash", 8:"Money Order"}
    $('input[name="t"]').menuoptions({  "Data": PayMethod, 
                                        "SelectOnly": true, 
                                        "ClearBtn": true, 
                                        "PlaceHolder": "Pay Method", 
                                        "ColumnCount": 2,
                                        'Width': 225 });


MenuOptions will write an attribute into the input element called 'menu_opt_key'

So if you chose "American Express" the input field would change from:

<input name="t" type="text" placeholder="Pay Method" readonly="">

to this:

<input name="t" menu_opt_key="1" type="text" placeholder="Pay Method" readonly="">


serialize() would grab the text "American Express". re_serialize would grab the "menu_opt_key" field (1 in this case) and replace "American Express" in the get string. so this:

t=American+Express&t2=Co-habitating&t3=AZ&t4= becomes this:

t=1&t2=3&t3=AZ&t4=




Code


                
     var us_states  = ['AL','AK','AZ','AR','CA','CO','CT','DE','FL','GA','HI','ID','IL','IN','IA','KS','KY','LA','ME',
                                   'MD','MA','MI', 'MN','MS','MO','MT','NE','NV','NH','NJ','NM', 'NY','NC','ND','OH','OK','OR','PA',
				   'RI','SC','SD','TN','TX','UT', 'VT','VA','WA','WV','WI','WY'], 
        PayMethod   = { 1: "American Express", 2: "Visa", 3: "Mastercard", 4:"Discover", 5:"Check", 6:"PayPal", 7:"Cash", 8:"Money Order"},
        MarStat   = { 1: "Single", 2: "Married", 3: "Co-habitating", 4:"Seperated", 5:"Divorced", 6:"Widowed"};

    $('input[name="t"]').menuoptions({  "Data": PayMethod, 
                                        "SelectOnly": true, 
                                        "ClearBtn": true, 
                                        "ColumnCount": 2
                                        });
    $('input[name="t2"]').menuoptions({ "Data": MarStat, 
                                        "ClearBtn":true, 
                                    });   
    $('input[name="t3"]').menuoptions({ "Data": us_states, 
                                        "ClearBtn":true, 
                                        "ColumnCount":6, 
                                        "UseValueForKey":true });   

    $('button.a').off('click');
    $('button.a').on('click', function(e) {
       var res = $('form#tst').serialize(); 
       var new_get_str = $('input[name=t3]').menuoptions('re_serialize', res);
       $('div#serialize_text').html("serialize() result (below):").css({'color':'green'});
       $('div#reserialize_text').html("re_serialize result (below):").css({'color':'green'});
       $('div#serialize').html(res);
       $('div#re_serialize').html(new_get_str);
       e.preventDefault();
    });
   
            

            
            <div id=main_column class="col-md-8 col-xs-8">
                <form id=tst>
            <div class="col-md-1 col-xs-1" > </div>
            <div class="col-md-3 col-xs-3" style='height:250px' >
                <input class="form-control"  name='t'  type=text placeholder='pay method'><br>
                <input class="form-control"  name='t2'  type=text placeholder='Marital Status'><br>
                <input class="form-control"  name='t3'  type=text placeholder='State'><br>
                <input class="form-control"  name='t4'  type=text placeholder='Phone'>
            </div>
            <div class="col-md-1 col-xs-1" > </div>
            <div class="col-md-6 col-xs-6" >
                <div class=answ id=serialize_text> </div>
                <div class=answ id=serialize> </div>
                <div class=answ id=reserialize_text> </div>
                <div class=answ id=re_serialize> </div>
            </div>
            <div class="row">
                <div class="col-md-12 col-xs-12 text-center">
                    <button class="a" tooltip="Click to see serialize results" id=btn>See results</button><br>
                </div>
            </div>
            </form>
        </div> <!--  close inner row  -->
        
        

            
  <!--//  <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">