Nice Simple Tag Input With Minimal Design For Bootstrap | MAB.Bootstrap.TagInput

The mab.jquery.TagInput is a jQuery plugin used to convert a text field into a nice input field for tag management.

Fully compatible with Twitter typeahead.js to provide auto-complete / auto-suggest functionality to simplify tag input.

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' },


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


  // 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

Official Website(markashleybell): Click Here

This superior jQuery/javascript plugin is developed by markashleybell. For extra advanced usage, please go to the official website.

Related Posts


How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…


Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…


Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…


An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….


A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…


A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…