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

Question

Select2 4.0.0 的 AJAX 功能似乎不起作用。它显示来自 AJAX 的结果，但是当您单击结果项时它不会 select。我在这上面浪费了几个小时，我们将不胜感激。

以下代码不起作用：

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 的情况下尝试时，它起作用了，结果 select 进入输入字段：

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 组件时，您可以 select 现有的 html 标签，例如

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

html 标签位于您的 ember cli 位置 templates/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 组件的引用。因此，当您 select 列表中的结果 select2:selecting 事件不会生成，因此结果值不是 selected.

我使用以下方法对此进行了测试：

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

然而，当您使用方法 1 时。ajax 回调不会丢失对 select2 组件的引用并生成 "select2:selecting" 事件并按预期工作，结果能够被select编辑。

因此有效：

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 自定义组件

SELECT2 AJAX not selecting results - Ember.js Ember Cli Custom Component

jquery-select2

jquery-select2-4