Debounce (Select Search) Ajax Request

How can I use the debounce functionality in the data return of the vue instance. Currently, its making multiple requests on typeahead.

GET Request 
/search?term=w
/search?term=wa
/search?term=wai
/search?term=wait

data() {
    return {
      selectConfig: {
        ajax: {
          url: function (params) {
            return new URL(location.href)
          },
          data: function (params) {
            var query = {
              search: params.term,
            }
          },
          processResults: function (response) {
            ... process response data and map
                }
          }
      },
    }
  },

flightsimmer668

6 years ago

Level 11

The Vue documentation recommends using the _.throttle function that comes with lodash https://vuejs.org/v2/guide/migration.html#debounce-Param-Attribute-for-v-model-removed instead of debouncing where you have to wait for the user to finish typing for a certain amount of time before the AJAX request is performed.

Maybe try this pattern:

<input type='text' v-model='yourVariable' @input='sendAjax'>

methods: {
	sendAjax: _.throttle(() => {
      		// send and process 
    }, 2000)
}

Of course, if you want to, you can also use lodash's _.debounce function in place of _.throttle

1 like

Please or to participate in this conversation.