Question

这是我的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组件来做到这一点。

有人知道答案吗？

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

Answer 1

为什么要打扰第二个ajax电话？

/transporter/app/roster/getAll

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

不要返回“找不到用户”，分支到更复杂的搜索马上“像你说的第二个DB”，实际上还有一些东西

如果你想要第二个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 );
    }
}

我认为你实际上是自己回答了这个问题

Answer 2

在进行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;
            };

将1个数据集加载到select元素中，并过滤搜索另一个端点

2 个答案: