Perform function after given time you have stopped typing (keyup) Vuejs or Pure JS

Asked

Viewed 737 times

2

I’m trying to make that when I stop typing in the input, the system waits a second to do my search and return my result, but I’m not getting it. The system is being made in Vuejs

        <input class="input" type="text" v-model="valorPesquisa1" v-on:keyup="searchApi6(valorPesquisa1, 1)" placeholder="Informe nome">
<input class="input" type="text" v-model="valorPesquisa2" v-on:keyup="searchApi6(valorPesquisa2, 2)" placeholder="Informe nome, CNPJ, CPF ou CUT">
<input class="input" type="text" v-model="valorPesquisa2" v-on:keyup="searchApi6(valorPesquisa3, 2)" placeholder="Informe nome, CNPJ, CPF ou CUT">
<input class="input" type="text" v-model="valorPesquisa2" v-on:keyup="searchApi6(valorPesquisa4, 2)" placeholder="Informe nome, CNPJ, CPF ou CUT">

    searchApi6(val,box){
                    let typingTimer;
                    let doneTypingInterval = 1000;

                    clearTimeout(typingTimer);
                    if(val.length > 2){


                        typingTimer = setTimeout(function(){
                            switch(box){
                              case 1:
                                this.textArea1 = true
                                break;
                              case 2:
                                this.textArea2 = true
                                break;
                              case 3:
                                this.textArea3 = true
                                break;
                              case 4:
                                this.textArea4 = true
                                break;
                            }
                            axios.get(url+'ListaPessoa?Token='+localStorage['id']+'&Filtro='+val)
                            .then(response => {

                              switch(box){
                              case 1:
                                this.autocomplete1 = false;
                                break;
                              case 2:
                                this.autocomplete2 = false;
                                break;
                              case 3:
                                this.autocomplete3 = false;
                                break;
                              case 4:
                                this.autocomplete4 = false;
                                break;
                            }
                              this.searchPeople = response.data;
                            })
                            .catch(error => {
                              console.log(error);
                            })
                        }, doneTypingInterval);

                    }
                }

data(){
            return{
                data: this.$route.params.data,
                doctoBLID: this.$route.params.doctoBLID,
                valorPesquisa1: '',
                textArea1: true,
                textArea2: true,
                textArea3: true,
                textArea4: true,
                textPeople1: '',
                textPeople2: '',
                textPeople3: '',
                textPeople4: '',
                autocomplete1: true,
                autocomplete2: true,
                autocomplete3: true,
                autocomplete4: true,
                searchPeople: [],
                bloco2: true,
                bloco3: true,
                bloco4: true,
                textId1: '',
                textId2: '',
                textId3: '',
                textId4: '',
                valorPesquisa2: '',
                valorPesquisa3: '',
                valorPesquisa4: ''
            }
        }

But I’m not getting it

javascript vue.js

  • You can place the component object where you have the valorPesquisa1?

  • valuePquery 1 is set in Vue date as white, ai it is in input v-model

  • Yes, that I imagined, but I wanted to see the JS you have in that component so I can answer the question with your corrected code.

  • The only place I use it is here <input class="input" type="text" v-model="valuePesquisa1" v-on:keyup="searchApi6(valuePesquisa1, 1)" placeholder="Enter name">

  • Rafael, there are some errors in the code. If you want to put your code I can help and give an answer. Without seeing your code I’ll be guessing and the answer is less useful for you. You should have that valorPesquisa1 in the data also...

  • @Sergio I edited the code, and added the whole date

  • Great. Do you have more inputs where you research this component? I see valorPesquisa2 up to 4

  • @Sergio put the other inputs there, they are 4 inputs that search, they use the same function, because they search in the same API

Show 3 more comments

2 answers

1


I simplified your code so you wouldn’t repeatedly declare variables.

You must bear in mind that this method searchApi6 must be inside the object for the methods: methods.

An example of your corrected code (and simplifying with what is not part) would be:

{

  data() {
      return {
        data: this.$route.params.data,
        doctoBLID: this.$route.params.doctoBLID,
        valorPesquisa: {},
        typeTimeout: null,
        doneTypingInterval: 1000,
        autocomplete: {},
        textArea: {}
        // etc...
      }
    },
    methods: searchApi6(box) {

      clearTimeout(this.typingTimer);

      const val = this.valorPesquisa[box] || '';
      if (val.length > 2) {
        this.typingTimer = setTimeout(() => {
          this.textArea[box] = true
          axios.get(url + 'ListaPessoa?Token=' + localStorage.id + '&Filtro=' + val)
            .then(response => {
              this.autocomplete[box] = false;
              this.searchPeople = response.data;
            })
            .catch(error => {
              console.log(error);
            })
        }, this.doneTypingInterval);
      }
    }
}
<input class="input" type="text" v-model="valorPesquisa1" v-on:keyup="searchApi6(1)" placeholder="Informe nome">
<input class="input" type="text" v-model="valorPesquisa2" v-on:keyup="searchApi6(2)" placeholder="Informe nome, CNPJ, CPF ou CUT">
<input class="input" type="text" v-model="valorPesquisa2" v-on:keyup="searchApi6(3)" placeholder="Informe nome, CNPJ, CPF ou CUT">
<input class="input" type="text" v-model="valorPesquisa2" v-on:keyup="searchApi6(4)" placeholder="Informe nome, CNPJ, CPF ou CUT">

Note: Do not use name key data here: data: this.$route.params.data, uses another name not to mix with the key data of the Vue which is reserved.

  • In case, what are you picking up, coming from where? 'Cause you pulled val out of the job, I just got confused there, but your code sure got a lot cleaner :D

  • @Rafaelaugusto I’m traveling today and give the silence, sorry. Because the idea was to avoid repetition. If you have the date valorPesquisa: {}, as an object and then pass only v-on:keyup="searchApi6(1)" then you can take the val of the input that receives the keyup with const val = this.valorPesquisa[box] || ''; and so the same code works for 1 or a thousand inputs without having to repeat code.

0

I remade the answer with pure js.

var tempo = null;

document.getElementById('nome').addEventListener("keyup", teste);

function teste(){
var v = document.getElementById('nome').value;
  clearTimeout(tempo);
  tempo = setTimeout(function(){ alert("Buscar : " + v); }, 1000);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Nome : <input type="text" name="nome" id="nome" value="">

  • I am not using jQuery, and nor do I intend, in jQuery I know how to do, can only be in JS Puro/Vuejs.

  • I switched to pure js.

Browser other questions tagged javascript vue.js

You are not signed in. Login or sign up in order to post.