tokenfield

by Jairo Fontes

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://sliptree.github.io/bootstrap-tokenfield/dist/css/tokenfield-typeahead.css">
<link rel="stylesheet" href="http://sliptree.github.io/bootstrap-tokenfield/dist/css/bootstrap-tokenfield.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://sliptree.github.io/bootstrap-tokenfield/dist/bootstrap-tokenfield.js"></script>
<script src="http://sliptree.github.io/bootstrap-tokenfield/docs-assets/js/typeahead.bundle.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<form method="GET">
    <input type="text" class="form-control" id="tokenfield" value="red,green,blue" />
    <input type="submit" class="btn btn-primary">
</form>
<br>
<div class="form-data"></div>

JavaScript

$(document).ready(function() {   
    $('#tokenfield').tokenfield({
      autocomplete: {
        source: ['red','blue','green','yellow','violet','brown','purple','black','white'],
        delay: 100
      },
      showAutocompleteOnFocus: true
    });
    
    $("form").submit(function(e) {
        e.preventDefault();
        $('.form-data').text( $('#tokenfield').val());
    });
});