如何使用javascript显示datalist建议？ [英] How to show datalist suggestions using javascript?

问题描述

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

I find the new <datalist> generally very useful, but I think that the suggestions are not visible enough. Is there a way to trigger the display of datalist suggestions using 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中，仅当输入为空时已显示建议的完整列表，然后用户点击输入。向下箭头不显示建议 - 它只是减少值。

In Chrome, the full list of suggestions is shown only when the input is empty, already has focus, and the user then clicks on the input. The down arrow does not show the suggestions - it simply decrements the value.

我想使建议更明显。作为一个例子，我添加了一个应该打开建议列表的按钮。我在onClick-handler中放置了什么？

I'd like to make the suggestions more visible. As an example I've added a button that's supposed to open the list of suggestions. What do I put in the onClick-handler?

在这个例子中，我使用了Chrome，jQuery和一个数字输入，但我更喜欢一个通用的解决方案所有这些。

I've used Chrome, jQuery and a number-input in this example, but I'd prefer a generic solution independent of all of those.

推荐答案

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

If you remove the type="number" your users can get the dropdownlist using the basic alt+downarrow keyboard shortcut.

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

If that doesn't work for you. I suggest using a hybrid approach such as https://github.com/mmurph211/Autocomplete

这篇关于如何使用javascript显示datalist建议？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！