html datalist open list onclick 显示列表功能答案

【问题标题】：Html datalist open list onclick show list functionhtml datalist open list onclick 显示列表功能
【发布时间】：2018-10-20 17:04:28
【问题描述】：

您好，我正在寻找通过单击按钮打开数据列表选项列表的解决方案。

<input value="" list="default">
<i class="fa fa-caret-down innerinput" onclick="showList();"></i>

<datalist id="default">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

请参考这个小提琴链接： http://jsfiddle.net/3zpco1xe/1/

[输入][图标] -> 图标显示数据列表选项（点击输入字段时的功能）

有什么解决办法吗？

【问题讨论】：

实现这一点的总体思路是，我们可以通过编程方式（手动）在关联的输入元素上触发 HTML 焦点事件 或 key up 事件与该数据列表。这是一个强大的解决方案。 Trigger html5 input datalist dropdown to show up

标签： javascript html datalist

【解决方案1】：

不幸的是，没有办法做到这一点。

【讨论】：

【解决方案2】：

请点击图标显示列表。希望这会对你有所帮助。

function showList(v)
{  
    document.getElementById('dd').value='';
}

<input value="" list="default" id="dd" onclick="showList(this.value)">


<datalist id="default">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

【讨论】：

【解决方案3】：

试试这个

function showList(){
    cat = document.getElementById("default");
    cat.style.display = "block";
}

【讨论】：