具有自动完成功能的 InputMask

Posted 2023-05-08

【中文标题】具有自动完成功能的 InputMask

【英文标题】：InputMask with Autocomplete

【发布时间】：2017-04-24 02:40:29

【问题描述】：

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

我在存在问题的地方创建了小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 将仅适用于“小时” - 第一个符号直到我的“：”在掩码中。

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

【问题讨论】：

我在这里看到的问题是输入中的值永远不会与源匹配。如果输入掩码在字段具有焦点时允许该值不是hh:mm xm，那么它会按预期工作。必须调查。

【参考方案1】：

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

输入值时检查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>

在设置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 传递到autocomplete 的unmasked 值之间的链接：

在自动完成数据中添加了label 和value。

创建一个监听器来匹配label和value（默认情况下只匹配label）-modeled on the example here。

同时设置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 和下面的演示 sn-p：

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>