Skip to content
Advertisement

Show autocomplete only after 3 entered chars in field?

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:

  1. length == 1 id="" – The drop down is not displayed, no ID is linked to the datalist;
  2. length == 2 id="users" – The drop down is not displayed, then datalist has its ID set to "users";
  3. length == 3 id="users" – The drop down now reads that the ID 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 a DOM element, it cannot be styled (or hidden, in this case). This is why I used the setAttribute() method to set or remove the ID.

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>
User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement