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

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 位置 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 组件的引用。这样当您从列表中选择结果时，不会生成 select2:selecting 事件，因此不会选择结果值。

我对此进行了测试：

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

但是，当您使用方法 1 时，ajax 回调不会丢失对 select2 组件的引用并生成“select2:selecting”事件并按预期工作，结果可以被选中。

因此这是可行的：

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