Execute function after certain time that has stopped typing (keyup) VueJS or JS Pure

Question

Execute function after certain time that has stopped typing (keyup) VueJS or JS Pure

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I'm trying to do that as I stop typing in the input, the system waits a second to do my search and return my result, but I can not. The system is being done 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 can not do it

javascript vue.js

asked by anonymous 27.06.2017 / 16:35

2 answers

0

Refine the response 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:<inputtype="text" name="nome" id="nome" value="">

27.06.2017 / 22:49

Spring instantiate object with @Value How do I make the internal elements of ASIDE stay horizontal?

score 1 · Accepted Answer

I've simplified your code to not declare variables repetitively.

You should note that this searchApi6 method must be within the object for methods: methods .

An example of your corrected code (and simplifying it with what's 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 the data key here: data: this.$route.params.data, uses another name to not mix with the data key of the Vue that is reserved.