如何使用javascript显示datalist建议？

Question

我发现新的<datalist>一般非常有用,但我认为这些建议不够明显.有没有办法触发使用javascript显示datalist建议？

举个例子,我在<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处理程序中放了什么？

我在本例中使用了Chrome,jQuery和数字输入,但我更喜欢独立于所有这些的通用解决方案.

Answer 1

如果删除 type="number"，您的用户可以使用基本的 alt+downarrow 键盘快捷键获取下拉列表。

如果这对你不起作用。我建议使用混合方法，例如https://github.com/mmurph211/Autocomplete