JSFiddle - React, Tailwind, and code Playground

by Salvador Dali

HTML

<script src="https://rawgithub.com/sliptree/bootstrap-tokenfield/master/dist/bootstrap-tokenfield.min.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/twbs/bootstrap/master/dist/css/bootstrap.min.css">
<script src="https://rawgithub.com/twitter/typeahead.js/master/dist/typeahead.bundle.min.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/sliptree/bootstrap-tokenfield/master/dist/css/tokenfield-typeahead.min.css">
<link rel="stylesheet" href="https://rawgithub.com/sliptree/bootstrap-tokenfield/master/dist/css/bootstrap-tokenfield.min.css">
<input type="text" class="form-control" id="myField" value="red,green,blue" />

JavaScript

var list = [{value: 'red'}, {value: 'blue'}, {value: 'green'} , {value: 'yellow'}, {value: 'violet'}, {value: 'brown'}, {value: 'purple'}, {value: 'black'}, {value: 'white'}]

var engine = new Bloodhound({
  local: list,
  datumTokenizer: function(d) {
    return Bloodhound.tokenizers.whitespace(d.value); 
  },
  queryTokenizer: Bloodhound.tokenizers.whitespace    
});

engine.initialize();

$('#myField').tokenfield({
  typeahead: {
    source: engine.ttAdapter()
  }
}).on('tokenfield:preparetoken', function (e) {
    console.log(e.token);
    if (e.token.value.length < 5){
        e.token = null;
    }
    
});

console.log($('#myField').tokenfield('getTokens'));