Question

您好我使用的是多选下拉列表，使用select2 jquery 4.0.3 我正在使用Viewbag获取数据，并在下面的viewbag中加载大约9000个数据是下拉列表

@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

加载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
});

Answer 2

我在下面的链接中找到了我的答案

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

对于大数据，多选下拉搜索非常慢

2 个答案: