2

这是我的 select2 组件：

<select
    multiple
    id="e1" 
    placeholder: "Select meeting participants"
    style="width:450px;"></select>

默认情况下，当页面加载时，会进行 ajax 调用以将其与用户的联系人一起加载。

// Roster list remote call + handler =========================================>
transporter.ajax( "/transporter/app/roster/getAll", {}, 
    function( data )
    {
        var contacts = data.response.rlist.contactList;

        for( var i = 0; i < contacts.length; i++ )
        {
            var obj = new Object();
            obj[ 'id' ] = i;
            obj[ 'displayName' ] = contacts[i].displayName;
            obj[ 'contactName' ] = contacts[i].contactName;
            obj[ 'contactType' ] = contacts[i].contactType;
            obj[ 'avatar' ] = contacts[i].avatar;
            obj[ 'status' ] = contacts[i].status;

            roster.push( obj );
        }

        var ddl = document.getElementById( 'e1' );

        for ( var j = 0; j < roster.length; j++ ) 
        {
            var o = document.createElement( 'option' );
            o.value = roster[ j ].contactName;
            o.text = roster[ j ].displayName;
            ddl.appendChild( o );                
        }
    });

这就是我想要发生的事情：初始 ajax 调用加载并显示用户的本地联系人列表。用户很高兴看到他们也很容易选择他们经常邀请参加 mtgs 的人。

问题：如果他们希望用户不在他们的联系人中，他们会看到“未找到匹配项”消息。

问题：Select2 组件能否进行 ajax 调用来搜索更大的目录（在不同的端点）？

我的猜测是它不能，我必须添加第二个 Select2 组件才能做到这一点。

有人知道答案吗？

感谢您提供任何有用的提示！

4

2 回答 2

2

为什么还要打扰第二个 ajax 调用呢？

/transporter/app/roster/getAll

如果它返回“找不到用户”..你可以

  1. 不要返回“未找到用户”，立即分支到更复杂的搜索“第二个数据库就像你说的那样”，并实际返回一些东西

  2. 如果您确实想要第二个 ajax 调用，请执行以下操作

    transporter.ajax( "/transporter/app/roster/getAll", {}, callBack);

function callBack( data ) {
    var contacts = data.response.rlist.contactList;

    if (contacts == null || contacts.length == 0) {
        // callback fillList, don't call this in an endless loop
        transporter.ajax( "/transporter/app/roster/searchAll", {}, fillList);

        return;
    }

    fillList( data );
}

function fillList( data ) {
    var contacts = data.response.rlist.contactList;

    for( var i = 0; i < contacts.length; i++ ) {
        var obj = new Object();
        obj[ 'id' ] = i;
        obj[ 'displayName' ] = contacts[i].displayName;
        obj[ 'contactName' ] = contacts[i].contactName;
        obj[ 'contactType' ] = contacts[i].contactType;
        obj[ 'avatar' ] = contacts[i].avatar;
        obj[ 'status' ] = contacts[i].status;

        roster.push( obj );
    }

    var ddl = document.getElementById( 'e1' );

    for ( var j = 0; j < roster.length; j++ ) {
        var o = document.createElement( 'option' );
        o.value = roster[ j ].contactName;
        o.text = roster[ j ].displayName;
        ddl.appendChild( o );
    }
}

我想你实际上自己回答了这个问题

于 2013-07-14T23:13:24.577 回答
1

在进行 ajax 调用以搜索目录之前，我正在使用查询函数对本地数据集进行测试。现在我对本地数据集没有很好的过滤功能，只要输入不是空字符串，我就会进行 ajax 调用。

这并不理想，但现在可以使用。

$( '#e1' ).select2({
                placeholder: "Select participants",
                allowClear:true,
                multiple: true,
                query: function ( query ) 
                {
                    if( query.term == '')
                    {
                        // Query roster list first, if no matches then query directory
                        transporter.ajax( "/transporter/app/roster/getAll", {}, 
                            function( data )
                            {
                                var contacts = data.response.rlist.contactList;
                                var d = { results: [] };

                                for( var i = 0; i < contacts.length; i++ )
                                {
                                    var obj = new Object();
                                    obj[ 'id' ] = i;
                                    obj[ 'displayName' ] = contacts[i].displayName;
                                    obj[ 'contactName' ] = contacts[i].contactName;
                                    obj[ 'contactType' ] = contacts[i].contactType;
                                    obj[ 'avatar' ] = contacts[i].avatar;
                                    obj[ 'status' ] = contacts[i].status;

                                    roster.push( obj );

                                    d.results.push( { id:obj.contactName, displayName:obj.displayName, type:0 });
                                }
                                query.callback( d );
                            }
                        );
                    }else{
                        var params = {
                                query:query.term + '*',
                                searchFor:'users',
                                sortBy:'relevance'
                            };

                        // Query directory
                        transporter.ajax( "/transporter/app/search", params, 
                            function( data )
                            {       
                                if( data.response.userList != null )
                                {
                                    if( data.response.userList.user !=  null )
                                    {
                                        var peeps = data.response.userList.user;
                                        var datum = { results: [] };

                                        for( var i = 0; i < peeps.length; i++ )
                                        {
                                            datum.results.push( { id:peeps[ i ].loginName, displayName:peeps[ i ].displayName, type:1 } );
                                        }
                                        query.callback( datum );
                                    }else{
                                        var noResults = { results: [] };
                                        query.callback( noResults );
                                    }
                                }   
                            }
                        );
                    }
                },
                formatResult:formatContacts,
                formatSelection:formatContactsSelection,
                escapeMarkup: function( m ) { return m; }
            });

            function formatContacts( item ) {
                if( item.type != 0 )
                    return item.displayName // + '<br/><a>Add User to Roster</a>';
                else
                    return item.displayName;
            };

            function formatContactsSelection( item ) {
                return item.displayName;
            };
于 2013-07-17T19:40:58.057 回答