Question

Select2 4.0.0的AJAX功能似乎不起作用。它显示来自AJAX的结果，但是当您单击结果项时，它不会选择它。我浪费了几个小时，任何帮助将不胜感激。

以下代码不起作用：

var staticdata = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
self._select = self.$().select2({
  placeholder: self.get('placeholder'),
  tokenSeparators: [','],
  multiple: true,   
  ajax: {
    url: "http://localhost:9990/api/v1/users/",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    processResults: function (data, page) {
      return {
        results: staticdata
      };
    },
    cache: true
  }
});

但是，当我尝试不使用Ajax时，它可以工作，结果会在输入字段中选择：

var staticdata = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
self._select = self.$().select2({
  placeholder: self.get('placeholder'),
  tokenSeparators: [','],
  multiple: true,
  data: staticdata
});

Answer 1

所以这个问题是由于使用select2作为自定义ember组件。

创建ember组件时，您可以选择现有的html标签，例如

1. self.$('#selecttext').select2(...)

html标记位于ember cli位置模板/ components / select2-component.hbs中：

<select id="selecttext" class=" form-control input-md select2-hidden-accessible" multiple="" tabindex="-1" aria-hidden="true">
</select>

或者只是初始化它自己使用的组件：

2. self.$().select2(...)

当使用方法2.我猜测select2 AJAX回调以某种方式失去了对select2组件的引用。因此，当您从列表中选择结果时 select2：选择事件未生成，因此未选择结果值。

我使用以下方法测试了这个：

self._select.on("select2:selecting", function(e) { 
        alert('selecting');
    });

但是当你使用方法1. ajax回调不会丢失对select2组件的引用并生成＆＃34; select2：选择＆＃34;事件并按预期工作，可以选择结果。

因此这有效：

didInsertElement: function() {
 var self = this;
 var staticdata = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
 self._select = self.$('#selecttext').select2({

    // note we are explicitly initialising select2 component on #selecttext

    placeholder: self.get('placeholder'),
    tokenSeparators: [','],
    multiple: true,
    tags: false,
    //data: staticdata
    ajax: {
         url: "http://localhost:9990/api/v1/users/",
         dataType: 'json',
         delay: 250,
         data: function (params) {
         return {
            q: params.term // search term
        };
    },

    processResults: function (data, page) {
        return {
            results: staticdata
        };
     },
    cache: true
    }
}); //select2 END
} //didInsertElement END

SELECT2 AJAX未选择结果 - Ember.js Ember Cli自定义组件

1 个答案: