javascript - 将 1 个数据集加载到选择元素中并过滤搜索另一个端点

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

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

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 );
       }
   }
   

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