Question

所以我试图让select2插件与Backbone.js / CakePHP应用程序一起使用。我们的想法是，当任务完成时，此select2保存用于联系人的电子邮件地址，但表单是可编辑的。我想要做的是（1）加载/显示正在编辑的任务的所有已保存的电子邮件地址，以及（2）我仍然希望select2执行AJAX搜索以列出已识别的电子邮件。我一直有这个问题，我可以显示初始数据，或者具有AJAX搜索功能。

我的select2框的当前代码是Backbone.View，它看起来像：

define([
    'backbone',
    'jquery',
    'jquery.select2'
],
function(Backbone, $, select2) {

    var notificationSelector = Backbone.View.extend({

        notifications: undefined,

        events: {
            'change' : 'select2ContactsChanged'
        },

        initialize: function(attrs) {
            this.collection.on('add remove reset', this.render(), this);
            this.select2ContactsChanged(); 
        },                              

        render: function() {

            var contacts = ["abc@def.com", "joe@banana.com"];
            $('.notification-selector').attr('value', contacts);



            if(this.select2Control == undefined) 
            {
                // Do Search() + query here
                this.select2Control = this.$el.select2({
                    width: '200px',
                    placeholder: '@email',
                    tags: [],
                    minimumInputLength: 3,

                    // initSelection: function(element, callback) {
                    //  return $.ajax({
                    //      type: "GET",
                    //      url: "/notifications/fetch/",
                    //      dataType: 'json',
                    //      data: { id: (element.val()) },
                    //      success: function(data) {

                    //      }
                    //  }).done(function(data) {
                    //      console.log(data);
                    //  });
                    // },

                });
            }
            else
            {
                // Do Search() + query here
                this.select2Control = this.$el.select2({
                    width: '200px',
                    placeholder: '@email',
                    tags: [],
                    minimumInputLength: 3,

                    ajax: {
                        url: '/notifications/search/',
                        dataType: 'json',
                        data: function(term, page) {
                            return {
                                SearchTerm: term
                            };
                        },

                        results: function(data, page) {
                            return {
                                results: data
                            };
                        }
                    }
                });
            }

        },

        select2ContactsChanged: function() {
            var contacts = this.select2Control.val().split(',');
            this.collection.reset(contacts);
        }

    });

    return notificationSelector;
});

我读了Select2的创建者对其他人（https://github.com/ivaynberg/select2/issues/392）的回复，他说他用“自定义查询”来实现我想要的东西。我很难找到相关的例子或对文档有足够的认识来弄清楚他的意思。谁能发现我做错了什么/错过了？

谢谢你的时间！

EDIT 我忘了提到 - 它附加的DOM元素是<input type="hidden" multiple="true" class="notification-selector select2-result-selectable"></input>

Answer 1

好的，我终于找到了解决方案。我误解了$ .ajax（） - 我真的没想到它实际上是异步调用。检查调用返回的数据的代码是在AJAX实际完成之前运行的，所以我总是得到未定义的。

我为AJAX调用分配了一个变量，并设置了“async：false”，它运行得很好。

fetchSetNotifications: function() {
            var addresses = $.ajax({
                method: 'GET',
                dataType: 'json',
                context: $('#notifications'),
                url: '/Notifications/fetch/',
                async: false,

            alert(addresses);
        }

我在“地址”中获得的jqXHR对象然后在“responseText”属性中包含我想要的响应数据。

使用AJAX和初始本地数据选择2

1 个答案: