Which event should I use to react, when the user finishes typing some text in search field in Vue.js?

Question

I have a text-field (taken from vuetify library) which is used to filter some table in my application.

<v-text-field
  style="min-width: 300px;"
  v-model="filterString"
  label="Search" />

The working principle is simple - every time when the user provides new filter value, the table content should be updated. There is no submit-button or anything like that. Filtering is implemented on the backend-side, so every update demands sending a request to my API. I use a Vue.js watcher to send a request, when the filter string is updated.

watch: {
  async filterString() {
    // some logic containing communication with my api
  },
},

Let's suppose the user of my application types some 10 letters string in search box. Then, my application sends 10 requests to my API, ignoring the fact that first nine of them are useless. And that's my problem. Should i use the clock, and send a request only if a certain amount of time elapses? Is there some event which is fired when the user finishes typing, that i need to subscribe? How to send a request only when the user finishes typing in my box? Thanks for any answer.

Answer 1

You can still use the @change Vuetify event in combination with a debouncing tool. That would prevent you from performing multiple "useless" requests as you said.

You can either:

• Use a npm package such as this one
• Do it yourself (maybe see this thread if you need help)

Answer 2

What you are looking for is called debouncing. And it is just a timer that waits for you to stop pressing keys.

Here is a quick way to do it using lodash debounce

template:

    <input
            :value="input"
            @change="evt=>textChange(evt.target.value)"
            @input="evt=>textEntry(evt.target.value)"               
    />

javascript:

Imports:

 import { debounce } from 'lodash'

Definition:

 model: {
    prop: 'input',
    event: 'input'
  },
 props: {
    input: {
      default: '',
      type: String
    },
    debounce: {
      default: -1,
      type: Number
    }
  },
 methods: {
    textChange (value) {
        this.$emit('input', value)
      }
    },
    textEntry (value) {
      // This is to cover for situations where the change event runs first
      if (value.toUpperCase() === this.input.toUpperCase()) return
      if (this.debounce >= 0) {
        this.emitValue(value)
      } else {
        this.$emit('input', value)
      }
    }
  },
  async mounted () {
    this.emitValue = debounce(value => {
      this.$emit('input', value)
    }, Math.abs(this.debounce))
    await this.$nextTick()
    this.textChange(this.input) // apply whatever was loaded, and allow bindings to run
  }