具有自动完成功能的 InputMask

InputMask with Autocomplete

我想使用掩码和自动完成功能输入日期时间。

我在存在问题的地方创建了小 demo

看起来自动完成认为掩码是一个文本...只有当我完成输入时我才能看到自动完成的一些值(如果它存在于自动完成列表中)。

有什么解决办法吗?

  <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()
});

更新:

也许是解决方案的一些起点:如果我添加 属性 'autoUnmask' : true AutoComplete 将仅适用于 "hours" - 第一个符号直到掩码中的“:”。

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

这里的问题是 input 正在从 inputmask 传递到 autocomplete

  1. 输入值时检查input的值:

        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>
    

  2. 设置autoUnmask: true后检查input的值:

        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>
    

我想你现在已经明白要点了!

所以这是从 inpumask 传递到 autocompleteunmasked 值之间的 link:

  1. 向自动完成数据添加了 labelvalue

  2. 创建一个侦听器以匹配 labelvalue(默认情况下仅匹配 label)- modeled on the example here.

  3. 同时设置autoUnmask: truealias: '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 和下面的演示片段:

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>