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.

Today's browsers are growing to become 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 compromising the safety of your users. — Raul Butuc
– Raul Butuc, Commented Feb 6, 2020 at 23:00

Mister Jojo · Accepted Answer · 2020-02-06 23:29:45Z

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>

edited Feb 6, 2020 at 23:29

Mister Jojo

23k6 gold badges28 silver badges45 bronze badges

answered Feb 6, 2020 at 23:17

Mindaugas Kurlys

661 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Danny Fardy Jhonston Bermúdez Over a year ago

Always a solution based on pure JavaScript, it will always be better. A third-party library is not required. Excellent!

Mortimer Over a year ago

Yea, I know how to create dropdowns buuut you gave me answer with code and all soo...

Raul Butuc · Accepted Answer · 2020-02-06 22:55:39Z

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.

Collectives™ on Stack Overflow

How to show datalist with javascript?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related