How to make use of it:

1. Load the mandatory jQuery library and the typeahead.js into the HTML web page.

<script src="jquery.min.js"></script>
<script src="typeahead.bundle.min.js"></script>

2. Load the mab.jquery.taginput plugin’s information after jQuery library.

<link rel="stylesheet" href="mab-jquery-taginput.css">
<script src="mab-jquery-taginput.js"></script>

3. Create a tags input with pre-populated tags separates by ‘|’.

<input type="text" class="tag-input" value="cat|dog|catfish|fish">

4. Create a tags input with pre-populated tags separates by ‘|’.

var tags = new Bloodhound({
    datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.tag); },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: [
        { tag: 'dog' },
        { tag: 'cat' },
        { tag: 'fish' },
        { tag: 'catfish' },
        { tag: 'dogfish' },
        { tag: 'webcodeflow' },
    ]
});

tags.initialize();

5. Call the plugin in your textual content subject and accomplished.

$('.tag-input').tagInput({

  // tags separator
  tagDataSeparator: '|',

  // allow duplicate tags
  allowDuplicates: false,

  // enable typehead.js
  typeahead: true,

  // tyhehead.js options
  typeaheadOptions: {
      highlight: true
  },

  // typehead dataset options
  typeaheadDatasetOptions: {
    displayKey: 'tag',
    source: tags.ttAdapter()
  }
  
});

jQuery Tags Input Plugin with Autocomplete Support, MAB.Bootstrap.TagInput Plugin/Github

See Demo And Download