Skip to content Skip to sidebar Skip to footer
Home / Html Datalist / Javascript

How To Show Datalist With Javascript?

Post a Comment
Hey I want to show datalist of specific input on click of button but I cannot find how to. HTML 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>

Solution 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.


Post a Comment for "How To Show Datalist With Javascript?"