Uncaught TypeError：$（...）。tagsinputは関数ではありません

Question

私は検索ボックスといくつかのチェックボックスを持っています。チェックボックスをオンにすると、チェックボックスの値が検索ボックスにプッシュされます。

ここでは、タグのように見えるように検索ボックスにプッシュされた各文字列にBootstrap Tags Inputを使用したいと思いますが、タイトルにエラーメッセージが表示されます。

タグを使用していますか？

$(document).ready(function() { 
 
     $checks = $(":checkbox"); 
 
     $checks.on('change', function() { 
 
      var ingredient = $checks.filter(":checked").map(function (i, v) { 
 
       return this.id; 
 
      }).get().join(" "); 
 
      $('#SearchString').tagsinput(ingredient); 
 
     }).trigger('change'); 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<link href="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet" /> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script> 
 
    <script src="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script> 
 
    
 
    
 
    <input class="form-control" id="SearchString" data-role="tagsinput" name="SearchString" type="text" value="">

ここ

Answer 1

は、あなたの修正スニペットさ：

$(document).ready(function() { 
 
     $checks = $(":checkbox"); 
 
     $checks.on('change', function() { 
 
      $('#SearchString').tagsinput('removeAll'); 
 
      $checks.filter(":checked").each(function(index) { 
 
       $('#SearchString').tagsinput('add', this.value); 
 
      }); 
 
    }).trigger('change'); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<link href="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet" /> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script> 
 
    <script src="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script> 
 
    
 
    
 
    <input class="form-control" id="SearchString" data-role="tagsinput" name="SearchString" type="text" value=""> 
 

 
<div class="checkbox"> 
 
    <label><input id="chk1" type="checkbox" value="ingredient1">ingredient 1</label> 
 
</div> 
 
<div class="checkbox"> 
 
    <label><input id="chk2" type="checkbox" value="ingredient2">ingredient 2</label> 
 
</div> 
 
<div class="checkbox disabled"> 
 
    <label><input id="chk3" type="checkbox" value="ingredient3">ingredient 3</label> 
 
</div>

改良版、タグとしての代わりに、プレーンテキストのオブジェクトを使用して、ここにあります：https://jsfiddle.net/beaver71/v44mnn31/16/

この例では、タグ入力でタグを削除すると、それは関連するチェックボックスで選択されていません。