How to show datalist with javascript?

Question

Hey I want to show datalist of specific input on click of button but I cannot find how to.

HTML

<input type="text" name="" value="" list="list" id='input'>
<datalist id='list'>
  <option value="aaa">
  <option value="bb">
</datalist>
<div onclick="showDataList(event,'input')">
  Click
</div>

JS

function showDataList(e,id) {
  document.getElementById(id).list.show()
}

I have tried double focus(), focus() and click() and checking on which event datalist show function fires but to no avail.

Answer 1

To have working dropdown menu it's just simpler to use 3rd party libs such as material-ui/semantic-ui.
But if you want clean solution, this default approach might be useful.

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#aaa">aaa</a>
    <a href="#bb">bb</a>
  </div>
</div>

Answer 2

Datalist is not supported by all browsers and it is not handled the same way. I recommend you switch to something such as flexselect: https://rmm5t.github.io/jquery-flexselect/

This might not give you the answer you wanted, but there's no solution that will work for datalist (on all browsers). You can hack your way around and make it work on Chrome or Firefox, but even that will be hard to do because Google and Mozilla have completely restricted the usage of untrusted events/triggers . Read about this here: https://www.chromestatus.com/features/5718803933560832 https://www.chromestatus.com/features/6461137440735232

Also initMouseEvent is deprecated, so are all other low-level methods that would have allowed you to create this behaviour in the past.