是否可以在给定的字符串长度上给出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 个字符显示建议。
不,没有任何属性允许您仅使用 HTML 执行此操作。使用 javascript,您可以强制执行此行为。最好的方法似乎是从input
中删除 list=
属性,只要您不需要数据列表。
下面是一个 jQuery 示例,可以满足您的需求:
我添加了一个带有 list
属性副本的 data-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>