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/

The problem that I see here is that the value in the input never matches the source. If input mask coul allow the value to not be `hh:mm xm` when the field has focus, it would work as expected I think. Must investigate. — Twisty, Dec 09 '16 at 01:09

score 3 · Accepted Answer · answered Dec 12 '16 at 16:37

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

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:s t\\m','placeholder': 'hh:mm xm', 'hourFormat': '12', 'alias': 'datetime'" />

    <button id="button">Get</button>

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:s t\\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:

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

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

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

<button id="button">Get</button>

InputMask with Autocomplete

1 Answers1