MenuOptions - input masks and multi-column autocomplete combined
Example of autocomplete that allows user to enter items not in autocomplete list
Code
var data,
init_data="December",
DataKeyNames= {};
if ( document.URL.match(/bad_data/) ) {
init_data="Junk data";
}
if ( document.URL.match(/singleobject/) ) {
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" };
} else if ( document.URL.match(/one_dimens_ary/) ) {
data = [ "January","February","March","April","May", "June","July",
"August","September","October","November","December" ];
} else if ( document.URL.match(/two_dimens_ary/) ) {
data = [ [ "January","February"],["March","April"],["May", "June","July",
"August","September","October","November","December" ]];
} else if ( document.URL.match(/ary_of_objs/) ) {
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"} ];
} else if ( document.URL.match(/ary_of_mk_objs/) ) {
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"} ];
} else if ( document.URL.match(/bad_key_names/) ) {
DataKeyNames = { "key": "mon_nm", "value": "mon_nm" };
data = [ {"mon_num":1, "mon_name":"January", "junk_key":"junk_val"},
{"mon_num":2, "mon_name":"February", "junk_key":"junk_val"},
{"mon_num":12, "mon_name":"December", "junk_key":"junk_val"}];
} else if ( document.URL.match(/custom_key_names/) ) {
DataKeyNames = { "key": "mon_num", "value": "mon_name" };
data = [ {"mon_num":1, "mon_name":"January", "junk_key":"junk_val"},
{"mon_num":2, "mon_name":"February", "junk_key":"junk_val"},
{"mon_num":3, "mon_name":"March", "junk_key":"junk_val"},
{"mon_num":4, "mon_name":"April", "junk_key":"junk_val"},
{"mon_num":5, "mon_name":"May", "junk_key":"junk_val"},
{"mon_num":6, "mon_name":"June", "junk_key":"junk_val"},
{"mon_num":7, "mon_name":"July", "junk_key":"junk_val"},
{"mon_num":8, "mon_name":"August", "junk_key":"junk_val"},
{"mon_num":9, "mon_name":"September", "junk_key":"junk_val"},
{"mon_num":10, "mon_name":"October", "junk_key":"junk_val"},
{"mon_num":11, "mon_name":"November", "junk_key":"junk_val"},
{"mon_num":12, "mon_name":"December", "junk_key":"junk_val"}];
} else {
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" };
}
$('input#selecttest').menuoptions({
"Data": data,
"onSelect": function(mo, data) {
$('input#NewVal').val(data.newVal);
$('input#NewKey').val(data.newCode);
},
"DataKeyNames": DataKeyNames,
"ClearBtn": true,
"InitialValue": { 'val': init_data },
"UserInputAllowed": true,
"Help": 'right',
"Sort": []
});
$('input#scrolltest').menuoptions({
"Data": data,
"onSelect": function(mo, data) {
console.log(data.newVal, data.newCode, data.type );
},
"ClearBtn": true,
"DataKeyNames": DataKeyNames,
"InitialValue": { 'val': init_data },
"UserInputAllowed": true,
"Help": 'right',
"Height": 200,
"Sort": []
});
$('button#menutest').on('click', function (e) {
var tst = $('input#selecttest').menuoptions('re_serialize',$('form#tst').serialize());
alert (tst);
});
<div class="col-md-8 col-xs-8">
<div class="row">
<div class="col-lg-2" style="height:60px"> </div>
<div class="col-lg-5" style="height:60px">
<h3 class="text-left">Choose an autocomplete item...</h3>
</div>
<div class="col-lg-5 text-right" style="height:60px">
<h3 class="text-left">...or type in any string</h3>
</div>
</div>
<div class="row">
<div class="col-lg-2" style="height:60px"> </div>
<div class="col-lg-5 text-left" style="height:60px">
<input type=text class="form-control" name=month1 id='selecttest' placeholder='Month'>
</div>
<div class="col-lg-5 text-left" style="height:80px">
<input type=text class="form-control" name=month2 id='scrolltest' placeholder='Month'>
</div>
<div class="row">
<div class="col-md-5 col-xs-5 text-right" style='height:60px'>
</div>
<div class="col-md-7 col-xs-7 text-left">
<span class="text-left"><button class="a" type="button" id="menutest" >Show serialize values</button></span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12"><input id="NewVal" name="NewVal" type="hidden">
<input id="NewKey" name="NewKey" type="hidden"> </div>
</div>
<div class="col-md-2 col-xs-2">
</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">