如何使用JavaScript来显示数据列表的建议?(How to show datalist sug

2019-07-18 08:47发布

我找到了新的<datalist>通常是非常有用的,但我认为这些建议是不可见的不够。 是否有触发的使用JavaScript数据列表的建议显示的方法吗?

作为一个例子,我有上的一个数据列表<input type="number"> 的jsfiddle )。

<label>
    Enter a Fibonacci number:
    <input type="number" list="fibonacci" min="0" id="myinput">
</label>
<datalist id="fibonacci">
    <option value="0">
    <option value="1">
    <option value="2">
    <option value="3">
    <option value="5">
    <option value="8">
    <option value="13">
    <option value="21">
</datalist>
<button type="button" id="show-suggestions">Show suggestions</button>

<script>
$('#show-suggestions').click(function() {
    // .showSuggestions() does not exist.
    // I'd like it to display the suggested values for the input field.
    $('#myinput').showSuggestions();
});
</script>

在Chrome中,显示的建议的完整列表,只有当输入为空,已有焦点,然后用户点击输入。 向下箭头不显示的建议 - 它只是递减值。

我想提出的建议更为明显。 举个例子,我补充说,是应该开的建议列表按钮。 我把什么在onclick处理程序?

我用浏览器,jQuery和在这个例子中的一些投入,但我更喜欢一个通用的解决方案独立于所有这些的。

Answer 1:

如果删除类型=“数字”您的用户可以使用基本ALT + DownArrow中文键盘快捷键获取下拉列表。

如果不为你工作。 我建议使用一种混合的方法,例如https://github.com/mmurph211/Autocomplete



文章来源: How to show datalist suggestions using javascript?