InputMask with Autocomplete

Question

I want to make input for dateTime with mask and with autocomplete.

I've created small demo where the problem exists.

Looks like autocomplete thinks mask is a text... only if I finish input I can see some value from autocomplete (if it exists in autocomplete list).

Is there any solution?

  <input name="field1" id="field1" class="inputmask" data-inputmask="'mask': 'h:s t\\m','placeholder': 'hh:mm xm', 'hourFormat': '12', 'alias': 'datetime'"/>


function generateTime(){
  var times = [];
  Array(24).join(',').split(',').forEach(function (_, index) {
        var hour = index;
        if (hour < 10) {
            hour = '0' + hour;
        }
        times.push(moment(hour + ':00', 'HH:mm').format('hh:mm a'));
        times.push(moment(hour + ':30', 'HH:mm').format('hh:mm a'));
  });

  return times;
}


$('.inputmask').inputmask();
$('.inputmask').autocomplete({
      source: generateTime()
});

---

UPD :

Maybe some starting point for solution : In case I will add property 'autoUnmask' : true AutoComplete will work only for "hours" - first symbols till my ":" in mask.

https://jsfiddle.net/vbekLtm6/5/

Answer 1

The problem here is that the value of the input is being passed from inputmask to autocomplete .

1. Check the value of the input while entering the value:

     function generateTime() { var times = []; Array(24).join(',').split(',').forEach(function(_, index) { var hour = index; if (hour < 10) { hour = '0' + hour; } times.push(moment(hour + ':00', 'HH:mm').format('hh:mm a')); times.push(moment(hour + ':30', 'HH:mm').format('hh:mm a')); }); return times; } $('.inputmask').inputmask(); $('.inputmask').autocomplete({ source: generateTime() }); $('#button').click(function() { console.log($('input').val()) }); 

     <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/inputmask.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/jquery.inputmask.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/inputmask.regex.extensions.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/inputmask.date.extensions.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script> <input name="field1" id="field1" class="inputmask" data-inputmask="'mask': 'h:st\\\\m','placeholder': 'hh:mm xm', 'hourFormat': '12', 'alias': 'datetime'" /> <button id="button">Get</button> 

2. Check the value of the input when autoUnmask: true has been set up:

     function generateTime() { var times = []; Array(24).join(',').split(',').forEach(function(_, index) { var hour = index; if (hour < 10) { hour = '0' + hour; } times.push(moment(hour + ':00', 'HH:mm').format('hh:mm a')); times.push(moment(hour + ':30', 'HH:mm').format('hh:mm a')); }); return times; } $('.inputmask').inputmask(); $('.inputmask').autocomplete({ source: generateTime() }); $('#button').click(function() { console.log($('input').val()) }); 

     <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/inputmask.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/jquery.inputmask.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/inputmask.regex.extensions.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/inputmask.date.extensions.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script> <input name="field1" id="field1" class="inputmask" data-inputmask="'mask': 'h:st\\\\m','placeholder': 'hh:mm xm', 'hourFormat': '12', 'alias': 'datetime','autoUnmask':true" /> <button id="button">Get</button> 

I guess by now you'll have got the gist!

So here is the link between the unmasked value passed on from inpumask to autocomplete :

1. Added label and value to the autocomplete data.

2. Creating a listener to match both label and value (only label matched by default) - modeled on the example here .

3. Also set autoUnmask: true and alias: 'h:s t' :

    <input name="field1" id="field1" class="inputmask" data-inputmask="'mask': 'h:st\\\\m','placeholder': 'hh:mm xm', 'alias': 'h:s t','autoUnmask':true" /> 

Updated fiddle here and demo snippet below:

 function generateTime() { var times = []; Array(24).join(',').split(',').forEach(function(_, index) { var hour = index; if (hour < 10) { hour = '0' + hour; } times.push({ label: moment(hour + ':00', 'HH:mm').format('hh:mm a'), value: moment(hour + ':00', 'HH:mm').format('hhmma') }); times.push({ label: moment(hour + ':30', 'HH:mm').format('hh:mm a'), value: moment(hour + ':30', 'HH:mm').format('hhmma') }); }); return times; } $('.inputmask').inputmask(); $('.inputmask').autocomplete({ source: function(request, response) { var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); response($.grep(generateTime(), function(value) { return matcher.test(value.value) || matcher.test(value.label); })); } }); $('#button').click(function() { console.log($('input').val()) }); 

 <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/inputmask.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/jquery.inputmask.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/inputmask.regex.extensions.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/inputmask.date.extensions.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script> <input name="field1" id="field1" class="inputmask" data-inputmask="'mask': 'h:st\\\\m','placeholder': 'hh:mm xm', 'alias': 'h:s t','autoUnmask':true" /> <button id="button">Get</button>