Tagbox component not able to handle more than 1000+ data

[Nawazsherif]

Bug

I am using tagbox custom widget in my project. I have around 8000+ data to display in the tagbox. Select2 config offers some way to handle lot of data. But, we couldn't implement it using surveyjs. The response is very slow. There is a lag when the user types it.

What is the expected behavior?

Please implement some workaround in survey js for the custom component to handle lot of data

How would you reproduce the current behavior (if this is a bug)?

Provide more than 5000 data as choices

[tsv2013]

You can use the select2Config question property to pass your select2 config

[Nawazsherif]

I am already using it. But, I was not able to prepoulate the data. Even if I provide the data, it's not populated in the tagbox. I am using ajax option in the select2Config and I am providing the data.

[tsv2013]

If you share a minimal live sample illustrating the issue we could take a look

[Nawazsherif]

export const paginatedDropdownControl = (data: string[], minimumInputLength: number = 0) => {

  return ({
    minimumInputLength,
    ajax: {
      delay: 0,
      transport: function(params: any, success: any, failure: any) {
        let pageSize = 10;
        let term = (params.data.term || "").toLowerCase();
        let page = (params.data.page || 1);
        let timer;
        if (timer) {
          clearTimeout(timer);
        }
        let results: string | any[];
        timer = setTimeout(function() {
          timer = null;
          results = (data as string[])
            .filter(function(f: any) {
              return f.toLowerCase().includes(term);
            })
            .map(function(f: any) {
              return { id: f, text: f };
            });

          let paged = results.slice((page - 1) * pageSize, page * pageSize);

          let options = {
            results: paged,
            pagination: {
              more: results.length >= page * pageSize,
            },
          };
          success(options);
        }, params.delay);
      },
    },
  });
};

This is the code block I am using for select2config. I am providing the data directly instead of providing a URL to get the data. This is the code for infinite scrolling. First, it will provide 10 data. But, if I scroll down, it will bring the relevant data.

{
      type: "tagbox",
      name: "managers",
      title: "Managers",
      select2Config: paginatedDropdownControl(userList, 3),
}

This is the config, I am using for the questions.

I am using the same select2config, I am using for select2 dropdown.

{
      type: "dropdown",
      renderAs: "select2",
      select2Config: paginatedDropdownControl(projectBillingNames),
      name: "projectName",
}

P.S : If I provide existing data for the form, the select2 dropdown is being rendered correctly and prepopulates the data. But, the tag box is not prepopulating the existing data.

[Nawazsherif]

For support, https://stackoverflow.com/questions/32756698/how-to-enable-infinite-scrolling-in-select2-4-0-without-ajax This is how I enabled infinite scrolling.

[Nawazsherif]

Please find out the difference between the select2 dropdown and the select2 tag box implementation. The problem lies there. I am expecting a quick response. Thanks!!

[tsv2013]

It would be great if you provide as a minimal live sample illustrating the issue and the exact steps how to reproduce it. Please check the https://stackoverflow.com/help/minimal-reproducible-example article.

[Nawazsherif]

There are 2 ways to solve this issue.

1. The surveyjs library itself can provide infinite scrolling.
2. If I manually adds the select2config similar to https://github.com/surveyjs/custom-widgets/issues/248#issuecomment-810099816 , the data was not prepopulating. We need to fix that alone.

[Nawazsherif]

{
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "tagbox",
     "name": "question1",
     "choices": [
      "Item 1",
      "Item 2",
      "Item 3"
     ]
    }
   ]
  }
 ]
}

In the survey creator, I got this example. Just try adding 8000+ data or even 1000+ data in choices. You will face the issue.

[tsv2013]

The surveyjs library itself can provide infinite scrolling. Unfortunately at this moment SurveyJS Library doesn't provide this functionality, but you can use the 3rd party widget, like select2 or similar.

In order to get understand - what's wrong with it, we need locally reproduce exactly your case. That's why I'm asking for a minimal lice sample illustrating exactly your case.

On the other hand these custom widgets are the open source and community driven project. You can take the select2 custom widget source code, patch it according your needs and use it in your project.

[JaneSjs]

Hello @Nawazsherif, With the recent update (v1.9.58), we have released the lazy loading feature for the Dropdown and Tagbox widgets. We've created the following example to allow you to test this feature right now: Dropdown with lazy loading.

Once a user types in the Dropdown editor, the survey.onChoicesLazyLoad event is fired. The options.filter argument contains the entered text. You can use this event to retrieve a chunk of data from an API. The options.skip property determines the index of the first item to retrieve. The options.take property determines the number of items to retrieve. Use the options.setItems function to pass retrieved data to the widget.

You're welcome to test how this new functionality performs in your usage scenario. Should you have any questions or require further assistance, we are always here to help.