datalist how to toggle on and off

Asked May 31 '20 at 17:50

Active May 31 '20 at 17:52

Viewed 20 times

I want to make it so that whenever the user click on the input box the options disappear and whenever they click on it again it reappears. My html code is above javascript below

function test() {
  var data = document.getElementById("browsers")
  // data.toggle();
  var x = document.getElementById("a");
  if (x.style.display == "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }

}

<label>Choose a browser from this list:
  <input id = "a" list="browsers" name="myBrowser" 
    style="width: 400px;" onclick="test()" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

edited May 31 '20 at 17:52

mplungjan

155,085
27
166
222

asked May 31 '20 at 17:50

randomvincent

try on input using an addeventListener – mplungjan May 31 '20 at 17:55
did not work same issue – randomvincent May 31 '20 at 17:59
If you try this without any javascript code, would that not meet your requirement? – Zabeeh Ullah Babar May 31 '20 at 18:01
function test() { const input = document.getElementById("a"); const listProperty = input.getAttribute("list"); const newListProperty = listProperty === "browsers" ? "" : "browsers"; input.setAttribute("list", newListProperty); } – Zabeeh Ullah Babar May 31 '20 at 18:18
thanks it works but it is a bit glitchy. the first thing you press the down error it automatically closes. the second time and everytime after you don't have this problem though – randomvincent Jun 01 '20 at 15:59

datalist how to toggle on and off

0 Answers0