title: Bootstrap 4 + Tokenfield Autocomplete
body: <p>I need help with a little script.</p>
  
  <p>In a bootstrap form the user should enter tags with autocomplete (database).</p>
  
  <pre><code>  &lt;!-- Css Files--&gt;
  
  
    &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"&gt; 
  
    &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css"&gt;
  
  
    &lt;!-- JS Files --&gt;
  
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
  
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"&gt;&lt;/script&gt;
  
     &lt;div class="form-group"&gt;
      &lt;label&gt;Enter Tags&lt;/label&gt;
      &lt;input type="text" class="form-control" name="tokenfield" id="tokenfield" /&gt;
     &lt;/div&gt;       
  
  
      &lt;script type="text/javascript"&gt;
  $('#tokenfield').tokenfield({
    autocomplete: {
      source: ['red','blue','green','yellow','violet','brown','purple','black','white'],
      delay: 100
    },
    showAutocompleteOnFocus: true
  });
      &lt;/script&gt;
  </code></pre>
  
  <p>It works ... but this ist without the database.</p>
  
  <p>Now i tried this:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $('#tokenfield').tokenfield({
    autocomplete: {
  
        source: function (request, response) {
  
            jQuery.get("tags_db.php", {
  
                query: request.term
  
            }, function (data) {
  
                // data = $.parseJSON(data);
                var t = [];
                $.each(data,function(k,v){
                  t[k] = v.name;
                })
  
                response(t);
  
            });
  
        },
  
  
  
      delay: 100
    },
    showAutocompleteOnFocus: true
  });
      &lt;/script&gt;
  </code></pre>
  
  <p>Nothing happens ...</p>
  
  <p>The Return of the tags_db.php is:</p>
  
  <p>["red","blue","green","yellow","violet","brown","purple","black","white"]</p>
  
  <p>The DB Connection works.</p>
  
  <p>Where is my mistake???</p>
  
  <p>Anyone have another solution???</p>