Bootstrap 4 Tags input Autocomplete – jQuery Suggestags

A lightweight jQuery plugin with Bootstrap 4 for tags input with autocomplete and tags suggestions. The plugin also offers to handle some basic tasks (i.e tags limit, class etc.) related to tags input.

Plugin Overview

Plugin: amsifySuggestags
Author: Amsify42
Licence: MIT Licence
Published: January 18, 2024
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version and Bootstrap 4.1.3
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 12 KB

How to Create Tags input with Autocomplete:

1. To create tags input autocomplete with Bootstrap 4, load the jQuery and Bootstrap framework into HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

2. After that, include the plugin’s CSS and JavaScript file.

<!-- Basic Style for Tags Input -->
<link rel="stylesheet" type="text/css" href="css/amsify.suggestags.css">

<!-- Suggest Tags Js -->
<script type="text/javascript" src="js/jquery.amsify.suggestags.js"></script>

3. Create input element that will be used for tagging input.

<div class="form-group">
   <input type="text" class="form-control" name="planets">
</div>

4. Initialize the plugin in jQuery document ready function.

$(document).ready(function(){
   $('input[name="planets"]').amsifySuggestags({
	suggestions: ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupitor', 'Uranus', 'Neptune', 'Pluto'],
   });
});

2 thoughts on “Bootstrap 4 Tags input Autocomplete – jQuery Suggestags”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...