Skip to content Skip to sidebar Skip to footer
Home / Javascript

Show Autocomplete Only After 3 Entered Chars In Field?

Post a Comment
Is it possible to autocomplete only after a user entered at least 3 letters? Here is my current code: HTML/PHP:
Copy

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 datalistID 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 == 1id="" - The drop down is not displayed, no ID is linked to the datalist;
  2. length == 2id="users" - The drop down is not displayed, then datalist has its ID set to "users";
  3. length == 3id="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.functiondoValidate() {};
<!doctype html><htmllang="en"><head><metacharset="utf-8"><title>reading json</title><scripttype="text/javascript">functionlog(p) {returnconsole.log(p)}</script></head><body><formname="form"class="form-container"method="post"onsubmit="return doValidate()"id="myForm2"><label><inputplaceholder="Organisator"id="name"list="users"name="mitarbeiter"autocomplete='off'required /></label><datalistid="users"class="dle"><optionvalue="alicia@keys.com">Alicia Keys</option><optionvalue="alicia@keyssecond.com">Alicia The Second</option><optionvalue="john@doe.com">John Doe</option><optionvalue="martin@scorsese.com">Martin Scorsese</option><optionvalue="iron@man.com">Iron Man</option></datalist><br><br>

    von <inputtype="time"name="zeitstart"class="zeitangaben"id="startzeitid"> Uhr bis <inputtype="time"name="zeitende"id="endzeitid"class="zeitangaben"> Uhr <br><br><buttontype="submit"class="btn"name="submit">Reservierung erstellen</button><buttontype="reset"class="btn cancel"onclick="hideDiv()">Abbrechen</button></form></body></html>

Solution 2:

You need to use javascript and listen to the keyup event for your input element.

Then you check if the value of the input is longer than 3 character and if it is, you need to make an ajax request to your server to get the related names and use them to fill the datalist

Solution 3:

Just thought I'd share what I did using setAttribute and removeAttribute on the keyUp and keyDown to display the datalist (dir) when the text box contains at least 3 characters and handling the Backspace (keyCode=8) to prevent the full list from showing as it widens the search results.

<inputtype="search"name="q"id="q"autofocus="true"onkeyup="if(this.value.length>=3)this.setAttribute('list','dir');"onkeydown="if(this.value.length<3||event.keyCode==8)this.removeAttribute('list');"placeholder="Search Staff Directory"
/>

Hope this helps anyone looking for a simple solution that does not require jQuery or Ajax, just a simple datalist.

You may like these posts

Post a Comment for "Show Autocomplete Only After 3 Entered Chars In Field?"