Select2 - 结果未在使用 AJAX 的下拉列表中列出

Question

我使用Select2 4.0.1，我使用ajax 根据用户输入填充结果，但是每当我搜索任何未列出任何结果的select2 时，我都会在ajax 响应中得到正确的结果。

在 ajax 响应后输入框也会失去焦点。

这就是我初始化 select2 的方式 -

  $('#select_tag_element').select2({
      closeOnSelect: false,
      multiple: true,
      placeholder: 'Assign a new tag',
      tags: true,
      tokenSeparators: [","],
      ajax: {
        url: "search_url",
        dataType: 'json',
        type: 'GET',
        delay: 250,
        data: function (params) {
          return {
            search: params.term,
            page: params.page
          };
        },
        processResults: function (data) {
          console.log(data)
          return { results: $.map( data, function(item) {
              return { id: item.id, text: item.name }
            })
          };
        },
        cache: true
      }
    });

我得到了预期的 JSON Javascript 控制台。

[Object, Object, Object]
0: Object
id: 239
name: "Tag1"
__proto__: Object
1: Object
id: 255
name: "Tag2"
__proto__: Object
2: Object
id: 256
name: "Tag3"
__proto__: Object
length: 3
__proto__: Array[0]

非常感谢任何帮助。Thnx:)

更新 -

我调试并发现它在下拉列表中加载结果，但是当globalEventContext.trigger( "ajaxComplete", [ jqXHR, s ] );this line在jquery.js中执行时它会删除结果下拉列表

if ( fireGlobals ) {
  globalEventContext.trigger( "ajaxComplete", [ jqXHR, s ] );
  // Handle the global AJAX counter
  if ( !( --jQuery.active ) ) {
    jQuery.event.trigger( "ajaxStop" );
  }
}

如何防止结果下拉菜单在上述触发器上关闭？

================================================ ================

更新

我能够解决这个问题。这是因为我在 ajax 成功时初始化了 select2。所以结果下拉菜单被隐藏了。

Answer 1

我刚刚修改了您的代码，这将对您有所帮助

$('#select_tag_element').select2({
  closeOnSelect: false,
  multiple: true,
  placeholder: 'Assign a new tag',
  tags: true,
  tokenSeparators: [","],
  ajax: {
    url: "search_url",
    dataType: 'json',
    type: 'GET',
    delay: 250,
    data: function (params) {
      return {
        search: params.term,
        page: params.page
      };
    },
    processResults: function (data) {
      var newData = [];
                    data.forEach(function (i,item) {
                        newData.push({
                            id: i.id  //id part present in data
                            , text: i.name  //string to be displayed
                        });
                    });

            return {
            results: newData
          };
    },
    cache: true
  },
   formatResult: function(data) {
        return data.name;
    },
    formatSelection: function(data) {
        return data.id;
    },
    escapeMarkup: function(m) {
        return m;
    }
});