如何使用 javascript 显示数据列表建议？

Posted 2023-03-04

【中文标题】如何使用 javascript 显示数据列表建议？

【英文标题】：How to show datalist suggestions using javascript?

【发布时间】：2013-01-01 02:50:15

【问题描述】：

我发现新的<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 处理程序中放了什么？

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

【参考方案1】：

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

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

【参考方案2】：

从包含 200 多个选项的列表中选择您所在的国家/地区是自动完成控件的理想候选者。直接在 HTML 页面中为每个国家/地区定义一个带有子元素的：

 <datalist id="countrydata">
       <option>Afghanistan</option>
       <option>Åland Islands</option>
       <option>Albania</option>
       <option>Algeria</option>
       <option>American Samoa</option>
       <option>Andorra</option>
       <option>Angola</option>
       <option>Anguilla</option>
       <option>Antarctica</option>
       ...etc...
    </datalist>

【讨论】：

您可以通过阅读this article来改进您的问题。