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 

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

// Close the dropdown if the user clicks outside of itwindow.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: 0px8px16px0pxrgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-contenta {
  color: black;
  padding: 12px16px;
  text-decoration: none;
  display: block;
}

.dropdowna:hover {background-color: #ddd;}

.show {display: block;}
<divclass="dropdown"><buttononclick="myFunction()"class="dropbtn">Dropdown</button><divid="myDropdown"class="dropdown-content"><ahref="#aaa">aaa</a><ahref="#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/5718803933560832https://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?"