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: 2019-04-02 08:20:09
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'],
   });
});

Be the first to comment

Leave a Reply

Your email address will not be published.


*