Select2 多次调用 ajax

Question

这段代码中的 Select2 组件有问题：

$("#group_select_name").select2({
  placeholder: "Select a Group",
  allowClear: true,
  ajax: {
    type: "GET",
    url: "../contactGroup",
    contentType: "application/json; charset=utf-8",
    dataType: 'json',
    processResults: function(data) {
      return {
        results: $.map(data, function(obj) {
          console.log("update 2")
          return {
            id: (obj.id),
            text: (obj.name)
          };
        })
      };
    },
  }
});

一切正常，但当我尝试使用搜索字段搜索内容时，组件向服务器发出多个不需要的 AJAX 请求。在浏览器的控制台中，我看到了数千个 "update 2".

Select 的版本是 4.0.3。有什么建议吗？

Answer 1

这是因为组件对每个按下的键进行请求。您可以定义启动请求的延迟，如官方文档中所述：

By default, Select2 will trigger a new AJAX request whenever the user changes their search term. You can set a time limit for debouncing requests using the ajax.delay option.

https://select2.github.io/options.html#a-request-is-being-triggered-on-every-key-stroke-can-i-delay-th

$('select').select2({
  ajax: {
    url: '/example/api',
    delay: 250
  }
});

[编辑]

您的 console.log 在 map 函数内，将在每次请求后对结果中的每个元素执行。

Select2 多次调用 ajax

Select2 multiple calls to ajax

ajax

jquery

jquery-select2

jquery-select2-4