Code

Javascript
HTML
includes


                
    var data;
    if ( document.URL.match(/singleobject/) ) {
       data = { "1":"<img class='check' src='imgs/Transparent.gif' width='1' height='1'>Check", 
                "2": "<img class='cash' src='imgs/Transparent.gif' width='1' height='1'>Cash", 
                "3": "<img class='charge' src='imgs/Transparent.gif' width='1' height='1'>Charge", 
                "4": "<img class='paypal' src='imgs/Transparent.gif' width='1' height='1'>Paypal"};
    } else if ( document.URL.match(/one_dimens_ary/) ) {
       data = [ "<img class='check' src='imgs/Transparent.gif' width='1' height='1'>Check", 
                "<img class='cash' src='imgs/Transparent.gif' width='1' height='1'>Cash", 
                "<img class='charge' src='imgs/Transparent.gif' width='1' height='1'>Charge",
                "<img class='paypal' src='imgs/Transparent.gif' width='1' height='1'>Paypal" ];
    } else if ( document.URL.match(/two_dimens_ary/) ) {
       data = [ [ "<img class='check' src='imgs/Transparent.gif' width='1' height='1'>Check" ], 
                [ "<img class='cash' src='imgs/Transparent.gif' width='1' height='1'>Cash" , 
                  "<img class='charge' src='imgs/Transparent.gif' width='1' height='1'>Charge",
                  "<img class='paypal' src='imgs/Transparent.gif' width='1' height='1'>Paypal" ] ];
    } else if ( document.URL.match(/ary_of_objs/) ) {
       data = [ { "1":"<img class='check' src='imgs/Transparent.gif' width='1' height='1'>Check" , 
                 "2": "<img class='cash' src='imgs/Transparent.gif' width='1' height='1'>Cash" }, 
                { "3": "<img class='charge' src='imgs/Transparent.gif' width='1' height='1'>Charge" }, 
                { "4": "<img class='paypal' src='imgs/Transparent.gif' width='1' height='1'>Paypal"} ];
    }  else {
       data = { "1":"<img class='check' src='imgs/Transparent.gif' width='1' height='1'>Check", 
                "2": "<img class='cash' src='imgs/Transparent.gif' width='1' height='1'>Cash", 
                "3": "<img class='charge' src='imgs/Transparent.gif' width='1' height='1'>Charge", 
                "4": "<img class='paypal' src='imgs/Transparent.gif' width='1' height='1'>Paypal"};
    }
  $('input#CustSel').menuoptions({
                                      "Data": data,
                                      "ClearBtn": true,
                               });


            
        <div class="col-md-8 col-xs-8">
            <div class="row">
                <div class="col-lg-4" style="height:60px"></div>
                <div class="col-lg-8 text-center" style="height:60px">
	        	      <input type=text  class="form-control" id='CustSel' type='text'  placeholder='Pay method' >
                </div>
            </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">

MenuOptions - input masks and multi-column autocomplete combined

Example of MenuOptions select (with images)

Code