具有自动完成功能的InputMask

Question

我想使用mask和autocomplete为dateTime输入。

我已经创建了存在问题的小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()
});

UPD：

也许是解决方案的一些起点：如果我要添加属性'autoUnmask' : true，则AutoComplete仅适用于＆＃34;小时＆＃34; - 第一个符号直到我的＆＃34;：＆＃34;在面具。

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

Answer 1

此处的问题是input的值正在从inputmask传递到autocomplete。

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

   ＆＃13;

   ＆＃13;

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

   ＆＃13;

       <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>

   ＆＃13;

   ＆＃13;
   ＆＃13;

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

   ＆＃13;

   ＆＃13;

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

   ＆＃13;

       <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>

   ＆＃13;

   ＆＃13;
   ＆＃13;

我想现在你已经掌握了要点！

所以这是从inpumask传递到autocomplete的未屏蔽的值之间的链接：

1. 在自动填充数据中添加了label和value。

2. 创建一个与label和value匹配的监听器（默认情况下仅匹配label） - modeled on the example here。

3. 同时设置autoUnmask: true和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和以下演示片段：

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