Множественный поиск выпадающий очень медленно с большими данными

Question

Привет я использую MULTISELECT ниспадающее меню, с помощью ВЫБ.2 JQuery 4.0.3 я получаю данные с помощью Viewbag и загрузку около 9000 данных в viewbag ниже является выпадающий

@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 содержит мои данные, теперь моя страница загружается отлично, но при поиске (введите требуемые данные в раскрывающемся окне поиска) выпадающее меню реагирует очень медленно.

Похоже, система повесилась, любое действие в этом окне поиска происходит очень медленно.

Любое решение для этого? Нужна помощь.

Answer 1

Я нашел свой ответ в ссылке ниже

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

MVC

Answer 2

Загрузка 9000 предметов и вставка их в DOM - плохая идея.

См. Приведенный ниже код, его будет легко реализовать. Это позволит вам загружать данные по страницам.

Вам необходимо создать конечную точку, которая возвращает 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 
});