Is it possible to autocomplete only after a user entered at least 3 letters? Here is my current code:
HTML/PHP:
<form name="form" class="form-container" method="post" onsubmit="return doValidate()" id="myForm2"> <label> <input placeholder="Organisator" id="name" list="users" name="mitarbeiter" required /> </label> <datalist id="users" class="dle" > <?php for ($i=0; $i<$counts; $i++) { echo '<option value="'.$AllData[$i]["mail"][0].'">'.$AllData[$i]["cn"][0].'</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>
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.
var input = document.querySelector("#name"), // Selects the input. datalist = document.querySelector("datalist"); // Selects the datalist.
Then declare the addEventListener
method on the input
element.
// 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", ""); } });
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 == 1
id=""
– The drop down is not displayed, noID
is linked to thedatalist
;length == 2
id="users"
– The drop down is not displayed, thendatalist
has itsID
set to"users"
;length == 3
id="users"
– The drop down now reads that theID
is 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
OS
and is not aDOM
element, 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
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>