Responsive Tags Input With Autocomplete - jQuery tagsInput

Responsive Tags Input With Autocomplete - jQuery tagsInput

This is a powerful, flexible jQuery based tags input where the users are able to add tags/tokens in the input box or select items from a suggestion dropdown while typing.

Fully responsive and mobile-friendly that uses CSS flexbox to automatically adjusts the size of the tags input on window resize.

It also provides a validation functionality to validate tags/tokes using RegExp.

More features:

  • Custom placeholder.
  • Allows you to specify the min/max number of characters & tags.
  • Duplicate validation.

How to use it:

1. Load the necessary jQuery library and the jQuery tagsInput plugin in the document.

<script src="" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="src/jquery.tagsinput-revisited.js"></script>
<link rel="stylesheet" href="src/jquery.tagsinput-revisited.css">

2. Load jQuery UI's files if you want to use the Autocomplete functionality.

<script src="" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="">

3. Create a normal input field and specify the pre-selected tags in the valua attribute:

<input id="example" name="example" type="text" value="jQuery,Script,Net">

4. Call the function on the input field and done.


5. Validate the tags while typing using the following options.

  // min/max number of characters
  minChars: 0,
  maxChars: null,
  // max number of tags
  limit: null,
  // RegExp
  validationPattern: null,
  // duplicate validation
  unique: true

6. Enable the user to select tags from a dropdown select:

  'autocomplete': {
    source: [

7. More customization options.

  // allows new tags
  interactive: true,
  // custom placeholder
  placeholder: 'Add a tag',
  // width/height
  width: 'auto',
  height: 'auto',
  // hides the regular input field
  hide: true,
  // custom delimiter
  delimiter: ',',
  // removes tags with backspace
  removeWithBackspace: true

This awesome jQuery plugin is developed by underovsky. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 19.09.2018
  • Source