From b06fffc96e95f4806377b421be9a0107380b27cc Mon Sep 17 00:00:00 2001 From: Hasan Ali Balcioglu Date: Sat, 29 Jul 2023 06:40:02 +0300 Subject: [PATCH] Add debounce for API requests --- README.md | 4 +++ docs/src/views/ModelAjax.vue | 45 +++++++++++++++++++++++++++ libs/components/ModelListSelect.vue | 1 + libs/components/ModelSelect.vue | 8 ++++- libs/components/MultiListSelect.vue | 1 + libs/components/MultiSelect.vue | 8 ++++- libs/components/mixins/commonMixin.js | 4 +++ 7 files changed, 69 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 5fb41fa..80aca19 100644 --- a/README.md +++ b/README.md @@ -74,11 +74,13 @@ pnpm add vue-search-select | | customAttr | Function | () => '' | Add custom html attribute | | | name | String | | input form name attribute | | | id | String | | id attribute | +| | debounce | Number | | wait time between inputs before triggering the "searchchange" event | | | searchchange | Event | | event triggered on search change | | | blur | Event | | event triggered on input blur | | ModelListSelect | list | Array | | option list | | | optionValue | String | | value key | | | optionText | String | | text key | +| | debounce | Number | | wait time between inputs before triggering the "searchchange" event | | | customText | Function | | custom text function | | | optionDisabled | String | false | disabled key | | | isError | Boolean | false | error style | @@ -99,6 +101,7 @@ pnpm add vue-search-select | | hideSelectedOptions | Boolean | false | Hide Option list that item selected | | | name | String | | input form name attribute | | | id | String | | id attribute | +| | debounce | Number | | wait time between inputs before triggering the "searchchange" event | | | searchchange | Event | | event triggered on search change | | | blur | Event | | event triggered on input blur | | | select | Event | | event triggered when item selected | @@ -114,6 +117,7 @@ pnpm add vue-search-select | | filterPredicate | String | new RegExp(inputText, 'i') | | | | name | String | | input form name attribute | | | id | String | | id attribute | +| | debounce | Number | | wait time between inputs before triggering the "searchchange" event | | | searchchange | Event | | event triggered on search change | | | blur | Event | | event triggered on input blur | | | select | Event | | event triggered when item selected | diff --git a/docs/src/views/ModelAjax.vue b/docs/src/views/ModelAjax.vue index 838a158..900e75f 100644 --- a/docs/src/views/ModelAjax.vue +++ b/docs/src/views/ModelAjax.vue @@ -36,6 +36,43 @@ +
+
+
+

Dynamic Search with ajax and 500ms debounce (country name)

+
+ + +
+
+
+

input text(searchText)

+

{{ searchText }}

+ + + + + + + + + + + + + +
codename
{{ selectedCountryDebounce.code }}{{ selectedCountryDebounce.name }}
+
+
+
@@ -89,7 +126,9 @@ export default { return { countries: [], selectedCountry: {}, + selectedCountryDebounce: {}, searchText: "", + searchTextDebounce: "", animations: [], selectedAnimation: {}, searchText2: "", @@ -105,6 +144,12 @@ export default { this.countries = response }) }, + searchCountryDebounce(searchText) { + this.searchTextDebounce = searchText + ajaxFindCountry(searchText).then(response => { + this.countries = response + }) + }, printSearchText(searchText) { this.searchText2 = searchText }, diff --git a/libs/components/ModelListSelect.vue b/libs/components/ModelListSelect.vue index 20f4206..2707530 100644 --- a/libs/components/ModelListSelect.vue +++ b/libs/components/ModelListSelect.vue @@ -14,6 +14,7 @@ export default { id: this.id, name: this.name, options: this.options, + debounce: this.debounce, modelValue: this.innerValue, isError: this.isError, isDisabled: this.isDisabled, diff --git a/libs/components/ModelSelect.vue b/libs/components/ModelSelect.vue index 67b3144..f8bdc4d 100644 --- a/libs/components/ModelSelect.vue +++ b/libs/components/ModelSelect.vue @@ -80,6 +80,7 @@ export default { searchText: "", mousedownState: false, // mousedown on option menu pointer: -1, + timeout: null, } }, watch: { @@ -92,7 +93,12 @@ export default { this.pointerAdjust() }, searchText() { - this.$emit("searchchange", this.searchText) + if(this.debounce > 0){ + clearTimeout(this.timeout); + this.timeout = setTimeout(() => {this.$emit("searchchange", this.searchText)}, this.debounce); + } else { + this.$emit("searchchange", this.searchText) + } }, }, computed: { diff --git a/libs/components/MultiListSelect.vue b/libs/components/MultiListSelect.vue index cd4baa4..7846272 100644 --- a/libs/components/MultiListSelect.vue +++ b/libs/components/MultiListSelect.vue @@ -12,6 +12,7 @@ export default { id: this.id, name: this.name, options: this.options, + debounce: this.debounce, selectedOptions: this.items, isError: this.isError, isDisabled: this.isDisabled, diff --git a/libs/components/MultiSelect.vue b/libs/components/MultiSelect.vue index 89d00b9..62041de 100644 --- a/libs/components/MultiSelect.vue +++ b/libs/components/MultiSelect.vue @@ -99,6 +99,7 @@ export default { searchText: "", mousedownState: false, // mousedown on option menu pointer: -1, + timeout: null, } }, watch: { @@ -109,7 +110,12 @@ export default { this.pointerAdjust() }, searchText() { - this.$emit("searchchange", this.searchText) + if(this.debounce > 0){ + clearTimeout(this.timeout); + this.timeout = setTimeout(() => {this.$emit("searchchange", this.searchText)}, this.debounce); + } else { + this.$emit("searchchange", this.searchText) + } }, }, computed: { diff --git a/libs/components/mixins/commonMixin.js b/libs/components/mixins/commonMixin.js index d66ec03..e0359c0 100644 --- a/libs/components/mixins/commonMixin.js +++ b/libs/components/mixins/commonMixin.js @@ -26,6 +26,10 @@ export default { type: String, default: "", }, + debounce: { + type: Number, + default: 0 + }, filterPredicate: { type: Function, default: (text, inputText) => {