ajax検索が完了する前にselect2にタグを追加する

Question

現在、私のselect2はajaxリクエストで動作し、PHPファイルからデータを取得できます。

今私が達成しようとしている何がある：

• は、AJAXリクエストが行われる前に、ユーザーがタグを追加することができます。
• タグが追加されている場合はリクエストを停止します。

私は、ユーザーがajaxの前にタグを追加できるようにする必要がある理由です。アヤックスは時間がかかります（多くのデータを検索します）

以下は、私のselect2のオプションの内容です。私はvue2で作業しており、select2は独自のコンポーネントになっており、オプションを渡します。

tags: true, 
width: '100%', 
multiple: false, 
maximumSelectionSize: 1, 
ajax: { 
    url: this.$webRoute('ajaxController'), 
    dataType: 'json', 
    delay: 250, 
    data: function (params) { 
     return { 
      q: params.term, // search term 
      page: params.page 
     }; 
    }, 
    processResults: function (data, params) { 
     var mappedData = _.map(data, function(o){ 
       var text = o.member_number + ' - ' + o.first + ' ' + o.last + ' (' + o.st_number + ' ' + o.st_predir + ' ' + o.street + ' ' + o.st_type + ' ' + o.st_dir + ' ' + o.unit + ' ' + o.section + ' ' + o.city + ' ' + o.state + ' ' + o.zip5 +')'; 
       return {id: o.member_number, text: text}; 
     }) 

     params.page = params.page || 1; 

     return { 
      results: mappedData, 
      pagination: { 
       more: (params.page * 30) < mappedData.total_count 
      } 
     }; 
    }, 
    cache: true 
}, 
minimumInputLength: 3, 

Answer 1

ajaxが実行される前にタグを追加できるようにするには、これは私が書いた解決策です。 upponが転送メソッドに入ると、成功を出してタグを返します。 Axiosがあっても別の成功を吹き飛ばし、オプションのリストに結果を追加します。

tags: true, 
width: '100%', 
multiple: false, 
createTag: function (params) { 
    return { 
     id: params.term, 
     text: params.term, 
     newTag: true 
    } 
}, 
insertTag: function (data, tag) { 
    data.push(tag); 
}, 
ajax: { 
    delay: 250, 
    transport: function (params, success, failure) { 

     success([""]); 

     if (params.data.term !== undefined) { 
      axios({ 
       url: vm.$webRoute('ajaxController'), 
       responseType: 'json', 
       method: 'post', 
       timeout: 1000, 
       data: { 
        q: params.data.term 
       } 
      }).then(function(response){ 
       if (response == -1) { 
        failure(); 
       }else{ 
        success(response); 
       } 
      }).catch(function (error) { 
       failure(); 
      }); 
     } 
    }, 

    processResults: function (data) { 
     var mappedData = [{}]; 
     if (data[0].data !== undefined) { 
      var mappedData = _.map(data[0].data, function(o){ 
       //process data 
       return {id: o.member_number, text: text}; 
      }) 
     }else if(data[0].id !== undefined){ 
      mappedData.push({id: data[0].id, text: data[0].text}); 
     } 

     return { 
      results: mappedData, 
      pagination: { 
       more: false 
      } 
     }; 
    } 
}, 
maximumSelectionSize: 1,