Is it possible to autocomplete only after a user entered at least 3 letters? Here is my current code:
HTML/PHP:
JavaScript
x
19
19
1
<form name="form" class="form-container" method="post" onsubmit="return doValidate()" id="myForm2">2
<label>3
<input placeholder="Organisator" id="name" list="users" name="mitarbeiter" required />4
</label> 5
<datalist id="users" class="dle" >6
<?php7
for ($i=0; $i<$counts; $i++) {8
echo '<option value="'.$AllData[$i]["mail"][0].'">'.$AllData[$i]["cn"][0].'</option>'; 9
}10
?>11
</datalist>12
<br><br>13
von 14
<input type="time" name="zeitstart" class="zeitangaben" id="startzeitid"> Uhr bis 15
<input type="time" name="zeitende" id="endzeitid" class="zeitangaben"> Uhr <br><br> 16
<button type="submit" class="btn" name="submit">Reservierung erstellen</button>17
<button type="reset" class="btn cancel" onclick="hideDiv()">Abbrechen</button>18
</form>19
I only find some Code with Jquery, is it not possible to do this without jquery?
Is it even possible? Any ideas?
Advertisement
Answer
Here is a way to do it: removing the datalist ID attribute.
First, declare the querySelector() methods.
JavaScript
1
3
1
var input = document.querySelector("#name"), // Selects the input.2
datalist = document.querySelector("datalist"); // Selects the datalist.3
Then declare the addEventListener method on the input element.
JavaScript
1
11
11
1
// Adds a keyup listener on the input.2
input.addEventListener("keyup", (e) => {3
4
// If input value is longer or equal than 2 chars, adding "users" on ID attribute.5
if (e.target.value.length >= 2) {6
datalist.setAttribute("id", "users");7
} else {8
datalist.setAttribute("id", "");9
}10
});11
Explanation
When the input value has a length greater than or equal to 2, the setAttribute() method sets the datalist ID attribute to "users".
I set the operator to >= 2 and not >= 3. Here is why: the datalist dropdown element is triggered at each keypress.
The process goes like this:
length == 1id=""– The drop down is not displayed, noIDis linked to thedatalist;length == 2id="users"– The drop down is not displayed, thendatalisthas itsIDset to"users";length == 3id="users"– The drop down now reads that theIDis set to"users"and displays the drop down.
Cons
- Since the attribute is set when the input length is
>= 2, if the input length== 3, the attribute will be removed when the input length== 2, and the drop down will be hidden when the input length== 1. - Since the drop down list is part of the
OSand is not aDOMelement, it cannot be styled (or hidden, in this case). This is why I used thesetAttribute()method to set or remove theID.
Upgrade?
A great upgrade / perfect solution would be creating a dropdown in JS just under the input. The drop down would be DOM element, and you could style it the way you want. You could ealisy display it > 2 chars and hide it < 3 chars.
Snippet
JavaScript
1
16
16
1
var input = document.querySelector("#name"), // Selects the input.2
datalist = document.querySelector("datalist"); // Selects the datalist.3
4
// Adds a keyup listener on the input.5
input.addEventListener("keyup", (e) => {6
7
// If input value is larger or equal than 2 chars, adding "users" on ID attribute.8
if (e.target.value.length >= 2) {9
datalist.setAttribute("id", "users");10
} else {11
datalist.setAttribute("id", "");12
}13
});14
15
// I had to include your doValidate() function otherwise I would get an error while validaing.16
function doValidate() {};JavaScript
1
29
29
1
<!doctype html>2
<html lang="en">3
<head>4
<meta charset="utf-8">5
<title>reading json</title>6
<script type="text/javascript">function log(p) {return console.log(p)}</script>7
</head>8
<body>9
10
11
<form name="form" class="form-container" method="post" onsubmit="return doValidate()" id="myForm2">12
13
<label><input placeholder="Organisator" id="name" list="users" name="mitarbeiter" autocomplete='off' required /></label>14
<datalist id="users" class="dle">15
<option value="alicia@keys.com">Alicia Keys</option>16
<option value="alicia@keyssecond.com">Alicia The Second</option>17
<option value="john@doe.com">John Doe</option>18
<option value="martin@scorsese.com">Martin Scorsese</option>19
<option value="iron@man.com">Iron Man</option>20
</datalist><br><br>21
22
von <input type="time" name="zeitstart" class="zeitangaben" id="startzeitid"> Uhr bis <input type="time" name="zeitende" id="endzeitid" class="zeitangaben"> Uhr <br><br> 23
24
<button type="submit" class="btn" name="submit">Reservierung erstellen</button>25
<button type="reset" class="btn cancel" onclick="hideDiv()">Abbrechen</button>26
27
</form>28
</body>29
</html>