这是一种方法：删除datalist ID属性。
首先，声明querySelector()方法。
var input = document.querySelector("#name"), // Selects the input.
datalist = document.querySelector("datalist"); // Selects the datalist.
然后在元素上声明addEventListener方法。input
// Adds a keyup listener on the input.
input.addEventListener("keyup", (e) => {
// If input value is longer or equal than 2 chars, adding "users" on ID attribute.
if (e.target.value.length >= 2) {
datalist.setAttribute("id", "users");
} else {
datalist.setAttribute("id", "");
}
});
解释
当输入值的长度大于或等于 2 时，该setAttribute()方法将datalist ID属性设置为"users"。
我将运算符设置为>= 2and not >= 3。原因如下：datalist下拉元素在每次按键时触发。
过程是这样的：
length == 1 id=""- 下拉列表不显示，没有ID链接到datalist；length == 2 id="users"- 不显示下拉列表，然后datalist将其ID设置为"users";length == 3 id="users"- 下拉列表现在读取ID设置为"users"并显示下拉列表。
缺点
- 由于输入长度时设置了属性
>= 2，如果输入长度== 3，输入长度时属性会被移除，输入长度时== 2下拉会隐藏== 1。
- 由于下拉列表是 的一部分
OS且不是DOM
元素，因此无法设置样式（在本例中为隐藏）。这就是我使用该setAttribute()方法设置或删除ID.
升级？
一个很好的升级/完美的解决方案是JS在输入下方创建一个下拉列表。下拉列表将是 DOM 元素，您可以按照自己的方式对其进行样式设置。您可以将其显示为> 2字符并隐藏它< 3的字符。
片段
var input = document.querySelector("#name"), // Selects the input.
datalist = document.querySelector("datalist"); // Selects the datalist.
// Adds a keyup listener on the input.
input.addEventListener("keyup", (e) => {
// If input value is larger or equal than 2 chars, adding "users" on ID attribute.
if (e.target.value.length >= 2) {
datalist.setAttribute("id", "users");
} else {
datalist.setAttribute("id", "");
}
});
// I had to include your doValidate() function otherwise I would get an error while validaing.
function doValidate() {};
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reading json</title>
<script type="text/javascript">function log(p) {return console.log(p)}</script>
</head>
<body>
<form name="form" class="form-container" method="post" onsubmit="return doValidate()" id="myForm2">
<label><input placeholder="Organisator" id="name" list="users" name="mitarbeiter" autocomplete='off' required /></label>
<datalist id="users" class="dle">
<option value="alicia@keys.com">Alicia Keys</option>
<option value="alicia@keyssecond.com">Alicia The Second</option>
<option value="john@doe.com">John Doe</option>
<option value="martin@scorsese.com">Martin Scorsese</option>
<option value="iron@man.com">Iron Man</option>
</datalist><br><br>
von <input type="time" name="zeitstart" class="zeitangaben" id="startzeitid"> Uhr bis <input type="time" name="zeitende" id="endzeitid" class="zeitangaben"> Uhr <br><br>
<button type="submit" class="btn" name="submit">Reservierung erstellen</button>
<button type="reset" class="btn cancel" onclick="hideDiv()">Abbrechen</button>
</form>
</body>
</html>