How to do "submit form after user stop typing" in vuejs2

Question

I have a search module in which: when a user stop typing it should search the name.

What I think the solution is to do a timeout when a user keyup. reference

<input type="text" @keyup="textSearch($event)">

textSearch(e){
    var timer;
    clearTimeout(timer);

    timer = setTimeout(() => {
        alert('searching...');
    }, 2500);
}

The code were all working, the problem is why when I type 3 character in just 1 second it pops out 3 alerts? I expect there should be one pop-out since it waits for 2.5 seconds.

Is there something wrong with the code? Need help Sirs

npmjs.com/package/vue-debounce

Hamelraj
– Hamelraj

2020-01-13 06:40:56 +00:00
Commented Jan 13, 2020 at 6:40 — Hamelraj
– Hamelraj, Commented Jan 13, 2020 at 6:40
@Hamelraj thanks, in that case no need to setTimeout

charles
– charles

2020-01-13 07:16:56 +00:00
Commented Jan 13, 2020 at 7:16 — charles
– charles, Commented Jan 13, 2020 at 7:16
yes just simply you can use

Hamelraj
– Hamelraj

2020-01-13 07:17:42 +00:00
Commented Jan 13, 2020 at 7:17 — Hamelraj
– Hamelraj, Commented Jan 13, 2020 at 7:17

MartinSRimsbo · Accepted Answer · 2020-01-13 06:53:48Z

15

If I understand you problem correctly the timeout you clear each time you run textsearch()is not the one you last created, but the one you just declared with var timer. I'd suggest storing your timer variable in your data properties instead to have clearTimeout clear the right timeout.

Something like this:

data: {
    timer: undefined
},
methods: {
    textSearch(e){
      clearTimeout(this.timer)

      this.timer = setTimeout(() => {
          alert('searching...')
      }, 2500)
    }
}

Working fiddle of your code with my modifications:

https://jsfiddle.net/MapletoneMartin/yjxfsehz/2/

Good luck!

answered Jan 13, 2020 at 6:53

MartinSRimsbo

2262 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

charles Over a year ago

solution is working. But I prefer the marked answer thank your for the response Sir. Voted up!

Hardik Raval · Accepted Answer · 2020-01-13 06:53:28Z

7

Here is a solution:

setTimeout is fine -- alternatively, you can use debounce Vue-debounce

<input v-debounce:400ms="myFn" type="text" />

<script>
export default {
  methods: {
    myFn(val) {
      console.log(val) // => The value of the input
    }
  }
}
</script>

answered Jan 13, 2020 at 6:53

Hardik Raval

3,6911 gold badge30 silver badges31 bronze badges

Comments

Shahadat Hossain · Accepted Answer · 2020-01-13 06:56:48Z

2

What I do to fix this issue is that I take timer variable in Vue data because when textSearch method called inside timer function is reassigned.

data () {
    return {
        timer: null
    }
}


textSearch(e){
    clearTimeout(this.timer);

    this.timer = setTimeout(() => {
        alert('searching...');
    }, 2500);
}

I think this will solve your issue.

answered Jan 13, 2020 at 6:56

Shahadat Hossain

97910 silver badges27 bronze badges

1 Comment

charles Over a year ago

solution is working. But I prefer the marked answer thank your for the response Sir. Voted up!

tempra · Accepted Answer · 2020-01-14 04:58:13Z

0

Another solution for this is, to use a watch instead of using event-keyup. You must create model first.

<input type="text" v-model="searchTxt">

data(){
    return{
        searchTxt: ''
    }
},

watch: {
    searchTxt: function(val) {
        if (!this.awaitingSearch) {
          setTimeout(() => {
            alert('searching');
            alert(this.searchTxt); //alert value

            this.awaitingSearch = false;
          }, 2500); // 2.5 sec delay
        }
        this.awaitingSearch = true;
    }
}

More information

edited Jan 14, 2020 at 4:58

answered Jan 13, 2020 at 6:42

tempra

2,3914 gold badges19 silver badges35 bronze badges

1 Comment

charles Over a year ago

solution is working. But I prefer the marked answer thank your for the response Sir. Voted up!

Collectives™ on Stack Overflow

How to do "submit form after user stop typing" in vuejs2

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related