How to handle large number of tags? 1000 tags and growing

[arcdelsol]

My tag list is growing and noticed some delay on initial load. (Typeahead not loading any tags because it's still loading)
Obviously I can add a loading graphic, but that's not a long term solution as list of tags are expected to grow more.
Maybe handle infinite loading or pagination somehow?

[shiwangebuzhidao]

Same problem, I need to handle 10 thousands of tags in my project

[paulm17]

I had the same issue.

Filling in the existing tags with > 1000 tags is not the correct answer. The best way is to do a search based on the input and do a like query to the db. This should yield an answer of no more than 25 results. The user can then enter more or less characters to get the desired result set or enter a new tag.

#20 has some code which should give you a partial answer. The op didn't include the code to fill in the search results array. So I will add that.

--- Main ---

fetch(search, callback) {
    let data = {
        query: search.search,
        limit: (search.limit > 25) ? search.limit : 25
    }

    axios.post('/api/dam/getTags', data)
    .then((response) => {
        let searchResults = [];

        for (let tag of response.data.data) {
            let item = {
                text: tag.tag
            };

            searchResults.push(item);
        }

        callback(searchResults)
    })
}

--- TagsInput.vue ---

if (this.typeaheadFetch && input.length > 0) {
    this.typeaheadFetch({ search: input, limit: this.typeaheadMaxResults }, (response) => {
            this.$nextTick(() => {
                this.searchResults = response;

                // We need to process the props update from the parent
                this.searchLoadedTag(input)
            });
        }
    );
} else {
    this.searchLoadedTag(input);
}

I have a working solution now.

[AlexMordred]

I've finally implemented AJAX search, which will solve this problem. Now you don't need to feed the component a list of all the tags. It's up to you to limit the number of the results on the backend.

Will make a release soon.

[nickelnext]

Hi Alex.

I can specify the url, but my endpoint is protected by a token.
I'm using nuxt and usually my REST API calls are as such

this.$axios.$get

Is there a way to specify a function rather than just a url? So we can use our own logic to call the server/endpoint, and fetch the tags object array?

Thanks

[AlexMordred]

Hey @nickelnext. Unfortunately, this is not possible at the moment. Do you feel like making a PR? :) If not, I might take a look at this.

P.S. Seems to be the same issue as #117.

[nickelnext]

Hi! I thought I replied already but i guess i didnt. Unfortunately i just started working with js and vue so i'm not that confident i'll be able to pull this off :(

[AlexMordred]

@nickelnext ok, I'll tackle this. And let's move the discussion to #117.