DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://rawgithub.com/bootstrap-tagsinput/bootstrap-tagsinput/master/dist/bootstrap-tagsinput.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/bootstrap-tagsinput/bootstrap-tagsinput/master/src/bootstrap-tagsinput.css">
<script src="https://rawgithub.com/davidkonrad/Bootstrap-3-Typeahead/master/bootstrap3-typeahead.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/bloodhound.js"></script>
<section id="examples">
  <div class="example example_typeahead">
    <h3>Typeahead</h3>
    <div class="bs-example">
      <input class="testing" type="text" value="nope" />
    </div>
  </div>
</section>

JavaScript

prefetch_url='https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/assets/cities.json';

var elements = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: prefetch_url,
        ttl:1
    });
    
elements.initialize();

var data = ['yes', 'yesyes', 'no', 'nope', 'yes again'],
    elt = $('.testing');
    
elt.tagsinput({
  option: '',
  typeahead: {
    source: data,
    afterSelect: function() {
    	this.$element[0].value = '';
    }
  }
})