jQuery Tags Input Autocomplete Plugin

1. Introduction

amsifySuggestags is a jQuery plugin for tags input with autocomplete suggestions. The plugin can be used in many different configurations and it comes with nice features like suggestions via ajax, white list, custom stylings, callbacks, events or tag limitation.

2. Plugin Overview

Demo

3. How to install and use amsifySuggestags jQuery plugin

Follow the below steps to install amsifySuggestags jQuery plugin on your website.

3.1. Load the jQuery and Bootstrap libraries into your 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">

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

3.2. Next, include amsifySuggestags 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.2. Create INPUT element that will be used as tags input:

<input type="text" class="form-control" name="country"/>

3.3. Initialize the amsifySuggestags in selected initial configuration:

$('input[name="country"]').amsifySuggestags({
    suggestions: ['India', 'Pakistan', 'Nepal', 'UAE', 'Iran', 'Bangladesh']
});

In the above example, the plugin after initialization will transform simple INPUT elements into a component with the autocomplete feature.

4. Conclusion

In this article, we presented amsifySuggestags jQuery plugin designed for creating input tags with autocomplete suggestions. The plugin should be useful on HTML forms where we need to provide multiple values: for example tags, emails or addresses.