結果が見つからない場合にリモートデータに新しいレコードを追加する - select2

Question

私はselect2ライブラリを利用するテキストボックスを持っています。

HTML：

<div class="form-group"> 
    <label for="tags" class="control-label">Tags</label> 
    <select class="tagsSearch" class="form-control" ng-model="post.tags" id="tags" style="width: 100%"> 
    </select> 
</div> 

JS：私は APIを自動入力する新しいフィールドを見つけることが引き金/API/searchTagsを得るよう

$(".tagsSearch").select2({ 
placeholder: 'Search for tags', 
delay: 250, 
tags: true, 
multiple: true, 
tokenSeparators: [',', ' '], 
minimumInputLength: 2, 
minimumResultsForSearch: 1, 
ajax: { 
    url: function (params) { 
     return '/api/searchTags'; 
    }, 
    dataType: "json", 
    type: "GET", 
    data: function (params) { 
     return { 
      text: params.term 
     }; 
    }, 
    processResults: function(data){ 
     return{ 
      results: $.map(data, function(obj){ 
      return { 
       id: obj.name, text: obj.name 
      }; 
      }) 
     }; 
    }} 
}); 

これは実際に動作します。一致するものが見つからない場合、ユーザーは新しいものを作成するオプションを持っています。

は、私には、例えば、APIを介してリモートデータソースには、この新たに選択したテキストを追加できるようにしたい：

/API/addToTags

しかし、私はそのイベントをトリガしますか？

また、これらの不一致フィールドを「マーク」することで、フォームが送信されたときにマークされたフィールドを探して代わりにAPIを作成することができます。

これは十分明確です。任意の入力をいただければ幸いです。

Answer 1

あなたは「変更」イベントの入力に含まれるすべてのタグを取得することができますし、タグがすでに

$(".tagsSearch").select2({ 
    placeholder: 'Search for tags', 
    delay: 250, 
    tags: true, 
    multiple: true, 
    tokenSeparators: [',', ' '], 
    minimumInputLength: 2, 
    minimumResultsForSearch: 1, 
    ajax: { 
     url: function (params) { 
      return '/api/searchTags'; 
     }, 
     dataType: "json", 
     type: "GET", 
     data: function (params) { 
      return { 
       text: params.term 
     }; 
    }, 
    processResults: function(data){ 
     return{ 
      results: $.map(data, function(obj){ 
      return { 
       id: obj.name, text: obj.name 
      }; 
      }) 
     }; 
    }} 
}) 
.on('change', function(e){ 
    // $(this).val() - array of tags in input 
    $.ajax({ 
      type: "POST", 
      dataType: 'json', 
      url: '/api/addToTags', 
      data: { 
       tags: JSON.stringify($(this).val()) 
      }, 
      success: function (json) { 
       console.log(json); 
      } 
     }); 
}); 

または代わり ユーザーが使用を開始するものタグを作成することはできません。存在しているサーバー上で確認することができますメソッドcteateTagによる数値。そして、「変更」では、新しいタグと既存のタグを分けることができます。数字を取得した場合、これは存在するタグのIDを取得することを意味します

$(".tagsSearch").select2({ 
    placeholder: 'Search for tags', 
    delay: 250, 
    tags: true, 
    multiple: true, 
    tokenSeparators: [',', ' '], 
    minimumInputLength: 2, 
    minimumResultsForSearch: 1, 
    ajax: { 
     url: function (params) { 
      return '/api/searchTags'; 
     }, 
     dataType: "json", 
     type: "GET", 
     data: function (params) { 
      return { 
       text: params.term 
     }; 
    }, 
    // do not allow user to create tag with a number 
    createTag: function (params) { 
     if (/^\d+$/.test(params.term)) { 
      return null; 
     } 
     return {id: params.term, text: params.term, newTag: true}; 
    } 
    processResults: function(data){ 
     return{ 
      results: $.map(data, function(obj){ 
      return { 
       id: obj.name, text: obj.name 
      }; 
      }) 
     }; 
    }} 
}) 
.on('change', function(e){ 
    // $(this).val() - array of tags in input 

    var allTags = $(this).val(); 
    var newTags = []; 
    allTags.forEach(function (el) { 
     if (!parseInt(el)){ // if it is not NaN it is a new tag, in the other case this will be id of exist tag 
      newTags.push(el); 
     } 
    }); 
    $.ajax({ 
      type: "POST", 
      dataType: 'json', 
      url: '/api/addToTags', 
      data: { 
       tags: JSON.stringify(newTags) 
      }, 
      success: function (json) { 
       console.log(json); 
      } 
     }); 
});