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 ] );执行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;
    }
});

选择2 - 使用AJAX在下拉列表中未列出结果

1 个答案: