Multiselect dropdown search is very slow with large data

Question

Hi i am using multiselect dropdown, using select2 jquery 4.0.3 i am getting data using Viewbag and loading around 9000 data in viewbag below is the dropdown

@Html.DropDownListFor(m => m.Tags, ViewBag.tags1 as IEnumerable<SelectListItem> , "----Select tags----", new { @class = "Tags form-control", multiple = "multiple", @id = "Tags" })

<script>
    $(document).ready(function () {
        $("#Tags").select2({
            placeholder: "Select Tags",
            minimumInputLength: 3,
            tags: true
        })
     });
</script>

ViewBag.tags1 contains my data , now my page load perfectly but while searching (type required data in dropdown search box) dropdown reacts very very slow.

It feels like system has got hanged, any action in that search box is very slow.

Any solution for this? Need help.

Answer 1

Loading 9000 items and inserting it to DOM is a bad idea.

Please see the code below, it will be easy to implement. This will allow you to load the data by page.

You need to create an endpoint that returns JSON.

$(".js-data-example-ajax").select2({
  ajax: {
    url: "https://api.github.com/search/repositories",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    processResults: function (data, params) {
      // parse the results into the format expected by Select2
      // since we are using custom formatting functions we do not need to
      // alter the remote JSON data, except to indicate that infinite
      // scrolling can be used
      params.page = params.page || 1;

      return {
        results: data.items,
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      };
    },
    cache: true
  },
  escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
  minimumInputLength: 1,
  templateResult: formatRepo, // omitted for brevity, see the source of this page
  templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});

Answer 2

I Found my answer in below link

datahaunting.com/mvc/select2-remote-data-example-in-asp-net-‌​mvc