I am looking for the command in a program that filters only when 3 letters are entered

Question

I am looking for the command in a program that filters only when 3 letters are entered. Does anyone know what command or code I need to look for to find this?

Maybe it's also a Vue-Command, because my program is written in Vue.js.

Thank you

Answer 1

Pass the search input to a function first then validate the input. If passes the validation, proceed with searching.

Assuming this is your search input

<input v-model="searchInput"/>

Add an input event handler

<input v-model="searchFor" @input="searchHandler"/>

Then validate the search input with searchHandler method

new Vue({

  methods: {
    searchHandler (text) {
      if(text.length > 2){
      // Write your code on here
      }
    }
  }

})

Answer 2

You can make use of debouncing to perform some functionality after some time, here you can also add a condition to check for the length of the input and then execute the logic.

const input = document.getElementById("myInput");

function callApi() {
    if(input.value.length >= 3) {
        console.log("Hello JS")
    }
}

function debounce( callback, d ) {
    let timeout;
    return function() {
        clearTimeout(timeout);
        timeout = setTimeout( callback, d );
    }
}

myInput.addEventListener(
    "keyup",
    debounce(callApi, 500 )
);

<label for="myInput">Type something in!</label>
<input id="myInput" type="text">