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.

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.

• javascript
• html-datalist

Share Improve this question Follow edited Feb 6, 2020 at 22:26 Mortimer asked Feb 6, 2020 at 22:06 MortimerMortimer 40266 silver badges1212 bronze badges 1

• 3 Today's browsers are growing to bee more secure and reliable. Allowing people to change the fundamentals of the behaviour for HTML tags via Javascript functions is extremely insecure. That's because normally, to obtain what you want you would have to create a custom dispatchEvent to handle your custom behaviour. That can easily introduce vulnerabilities thus promising the safety of your users. – Raul Butuc Commented Feb 6, 2020 at 23:00

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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>

Datalist is not supported by all browsers and it is not handled the same way. I remend 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 pletely restricted the usage of untrusted events/triggers . Read about this here: https://www.chromestatus./features/5718803933560832 https://www.chromestatus./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.