html - 是否可以在给定的字符串长度上触发 html5 数据列表？

Question

是否可以在给定的字符串长度上触发 html5 数据列表？

<input list="tagLookup" id="tag" name="tag" type="text" placeholder="+ add custom tag" autocomplete=off triggerOn="3">
<datalist id="tagLookup">
  <option value="aaaa">
  <option value="bbbb">
  <option value="cccc">
</datalist>  

想要显示用户输入的 3 个字符的建议。

Answer 1

不，没有任何属性允许您仅使用 HTML 来执行此操作。使用 javascript，您可以强制执行此行为。最好的方法似乎是从 input 中删除 list= 属性，只要您不需要数据列表即可。

这是一个可以满足您需要的 jQuery 示例:

我添加了一个 data-list 属性和 list 属性的副本，以便在输入超过 2 个字符后更容易恢复它。

$('input[list]').on('input', function(e) {
  var input = $(e.target),
      datalist = input.attr('data-list');

  if(input.val().length < 3) {
      input.attr('list', '');
  } else {
      input.attr('list', datalist);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input list="myList" data-list="myList">

<datalist id="myList">
  <option value="option 1">
  <option value="option 2">
</datalist>