Amsify Jquery Suggestags

This is a simple JQuery plugin for input tags with auto complete suggestion.

$('input').amsifySuggestags();

npm installation

npm i suggestags

Table of Contents

1. Simple
2. Default Value
3. Suggestions
4. Suggestions Through Ajax
5. White List
6. Custom Stylings
7. Callbacks and Events
8. Tag Limit
9. Refresh Destroy
10. Programmatically

Simple Tags

For simple initialization

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

$('input[name="country"]').amsifySuggestags();

Default Value

If input is already having value separated by comma, it will load the tags by default

<input type="text" class="form-control" name="country" value="India,UAE,Nepal"/>

$('input[name="country"]').amsifySuggestags();

Suggestions

List of values can be passed to get the suggestions.

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

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

Suggestions Through Ajax

We can also get suggestions through Ajax

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

$('input[name="country"]').amsifySuggestags({
	suggestionsAction : {
		url: 'http://www.site.com/suggestions'
	}
});

Ajax method type will be GET, structure of request data you will receive is

{
	"existing": ["one", "two", "three"],
	"term": "something"
}

existing is an array of already loaded tags and term is the string you are trying to search.
The success response should at least contain suggestions key and its value should be of type list/array:

{
	"suggestions": ["four", "five", "six"]
}

You can also add ajax callbacks to this option

$('input[name="country"]').amsifySuggestags({
	suggestionsAction : {
		url: 'http://www.site.com/suggestions',
		beforeSend : function() {
			console.info('beforeSend');
		},
		success: function(data) {
			console.info('success');
		},
		error: function() {
			console.info('error');
		},
		complete: function(data) {
			console.info('complete');
		}
	}
});

Note: success and complete callbacks does not directly override the original ajax callbacks, rather it gets called after original ones are executed.

White List

This option simply does not allow any other inputs other than from suggestions.

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

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

Custom Stylings

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

For setting default class for tags, you can pass this setting

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

We can pass list of classes, colors or backgrounds through settings

$('input[name="country"]').amsifySuggestags({
	suggestions: ['India', 'Pakistan', 'Nepal', 'UAE', 'Iran', 'Bangladesh'],
	whiteList: true,
	classes: ['bg-primary', 'bg-success', 'bg-danger', 'bg-warning', 'bg-info']
});

Each class will apply to each suggestion tag through their corresponding keys. We can also pass backgrounds and colors.

$('input[name="country"]').amsifySuggestags({
	suggestions: ['India', 'Pakistan', 'Nepal', 'UAE', 'Iran', 'Bangladesh'],
	whiteList: true,
	backgrounds: ['blue', 'green', 'red', 'orange', '#424242'],
	colors: ['white', 'black', 'white', 'black', 'white'],
});

Callbacks and Events

We can set callbacks on add/remove tag elements

$('input[name="country"]').amsifySuggestags({
	afterAdd : function(value) {
		console.info(value); // Parameter will be value
	},
	afterRemove : function(value) {
		console.info(value); // Parameter will be value
	},
});

or we can also subscribe to add/remove events

$('input[name="country"]').on('suggestags.add', function(e){
	// Do something after adding tag
});
$('input[name="country"]').on('suggestags.change', function(e){
	// Do something while add/remove tag
});
$('input[name="country"]').on('suggestags.remove', function(e){
	// Do something before removing tag
});

Tag Limit

We can also set tags limit

$('input[name="country"]').amsifySuggestags({
	tagLimit: 5
});

Refresh Destroy

For refreshing the values, you can use

var params = {
	// Make sure you have parameters which used during first execution
};
$('input[name="country"]').amsifySuggestags(params, 'refresh');

For destroying the instance, you can do

$('input[name="country"]').amsifySuggestags({}, 'destroy');

Programmatically

This is also one of the approach you can use this plugin.

Initilization

You can initialize by creating an instance of AmsifySuggestags and passing selector to it.

amsifySuggestags = new AmsifySuggestags($('input[name="country"]'));
amsifySuggestags._init();

Settings

You need to set it before initialization and you can use all the setting options shown in previous approach.

amsifySuggestags._settings({
	suggestions: ['Black', 'White', 'Red', 'Blue', 'Green', 'Orange']
})
amsifySuggestags._init();

Add/Remove Tag

You can call these methods to add/remove tag with instance of AmsifySuggestags

amsifySuggestags.addTag('Purple');
amsifySuggestags.removeTag('Red');

Refresh Destroy

You can call these methods to refresh/destroy

amsifySuggestags.refresh();
amsifySuggestags.destroy();

Note: This approach only works for single selector element not for multiple elements having same selector.
For making it work for selector having multiple elements, you can do something like this:

$('.tags-input').each(function(){
	amsifySuggestags = new AmsifySuggestags($(this));
	amsifySuggestags._init();
});