Chapril/mobilizon.chapril.org-mobilizon
Chapril/mobilizon.chapril.org-mobilizon
25
0
Fork 0
Code Issues Pull Requests Releases Activity

Debounce tag input autocomplete

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-03-28 11:22:40 +02:00
parent b47e46cef5
commit 85f8450a85
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
1 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
js/src/components/Event/TagInput.vue
View File

@ -21,7 +21,7 @@
maxlength="20" maxlength="20"
maxtags="10" maxtags="10"
:placeholder="$t('Eg: Stockholm, Dance, Chess…')" :placeholder="$t('Eg: Stockholm, Dance, Chess…')"
@typing="getFilteredTags" @typing="debouncedGetFilteredTags"
:id="id" :id="id"
dir="auto" dir="auto"
> >
@ -33,6 +33,7 @@ import { Component, Prop, Vue } from "vue-property-decorator";
import differenceBy from "lodash/differenceBy"; import differenceBy from "lodash/differenceBy";
import { ITag } from "../../types/tag.model"; import { ITag } from "../../types/tag.model";
import { FILTER_TAGS } from "@/graphql/tags"; import { FILTER_TAGS } from "@/graphql/tags";
import debounce from "lodash/debounce";
@Component({ @Component({
apollo: { apollo: {
@ -63,6 +64,12 @@ export default class TagInput extends Vue {
return `tag-input-${TagInput.componentId}`; return `tag-input-${TagInput.componentId}`;
} }
data(): Record<string, unknown> {
return {
debouncedGetFilteredTags: debounce(this.getFilteredTags, 200),
};
}
async getFilteredTags(text: string): Promise<void> { async getFilteredTags(text: string): Promise<void> {
this.text = text; this.text = text;
await this.$apollo.queries.tags.refetch(); await this.$apollo.queries.tags.refetch();