npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

suggestags

v1.27.0

Published

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

Downloads

826

Readme

Jquery Suggestags

This is a 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. More Settings
  11. Instantiating

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']
});

List if objects can also be set to have tag/value pair.

<input type="text" class="form-control" name="color"/>
$('input[name="color"]').amsifySuggestags({
	suggestions: [
					{tag: 'Black', value: 1},
					{tag: 'White', value: 2},
					{tag: 'Red', value: 3},
					{tag: 'Blue', value: 4},
					{tag: 'Green', value: 5},
					{tag: 'Orange', value: 6}
				]
});

Input will store value separated by comma like this

<input type="text" class="form-control" name="1,2,3,4,5,6"/>

Note: While setting the default value for the input, set actual value separated by comma not tag names.

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 these settings and callbacks to this option

$('input[name="country"]').amsifySuggestags({
	suggestionsAction : {
		timeout: -1,
		minChars: 2,
		minChange: -1,
		delay: 100,
		type: 'GET',
		url: 'http://www.site.com/suggestions',
		dataType: null,
		beforeSend : function() {
			console.info('beforeSend');
		},
		success: function(data) {
			console.info('success');
		},
		error: function() {
			console.info('error');
		},
		complete: function(data) {
			console.info('complete');
		}
	}
});
timeout - It is for cancelling the request after given specific seconds, default is -1
minChars - It is the minimum chars types before the first ajax hit, default is 2
minChange - It recall the ajax based on the minimum percentage chars changed compared to the string passed in last ajax call, default is -1
delay - It is the milliseconds time delay to call ajax or whitelist suggestions on text entered and wait, defult is 100
type - It is type of method we pass, default is GET
dataType - It is dateType of request data being passed, default is null

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'],
});

We can also set class, color and background at each suggestion item if the suggestion items are object.

$('input[name="color"]').amsifySuggestags({
	suggestions: [
					{tag: 'Black', value: 1, background:'black', color:'white'},
					{tag: 'White', value: 2, background:'white', color:'black'},
					{tag: 'Red', value: 3, background:'red', color:'white'},
					{tag: 'Blue', value: 4, background:'blue', color:'white'},
					{tag: 'Green', value: 5, background:'green', color:'white'},
					{tag: 'Orange', value: 6, background:'orange', color:'white'}
				]
});

Same suggestions can also be passed in ajax response to get these stylings working

{
	"suggestions": [
		{
			"tag": "Black",
			"value": 1,
			"background":"black",
			"color":"white"
		},
		{
			"tag": "White",
			"value": 2,
			"background":"white",
			"color":"black"
		}
	]
}

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');

More Settings

selectOnHover

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

It will not select the suggested tag value when the mouse hover the suggestion item. By default the value is true

noSuggestionMsg

This will show message when there is no suggested item appears matching the input.

$('input[name="country"]').amsifySuggestags({
	noSuggestionMsg: 'Enter to generate new tag'
});

showAllSuggestions

This will show all the suggestion item on input focus. By default this is false

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

keepLastOnHoverTag

This will keep the last suggestion item in the input text field, even when moving away from the suggestion list. By default this is true. Useful when showAllSuggestions is set to true and you wish to hide the suggestion list when clicking away from the input text field.

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

printValues

By default, input value and its tag names gets printed in console. You can set it false not to print in console.

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

showPlusAfter

This setting is for hiding proceeding tags when focus is out of tags section and show the + number instead. By default it is 0, you can set the number to hide the tags after the given number when focus is out.

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

suggestMatch

A callback function can be passed to match the user entered text with suggestion item to show in suggestions list for custom matching.

$('input[name="country"]').amsifySuggestags({
	suggestions: ['India', 'Pakistan', 'Nepal', 'UAE', 'Iran', 'Bangladesh'],
	suggestMatch : function(suggestionItem, value) {
	    return ~suggestionItem.toString().toLowerCase().indexOf(value.toString().toLowerCase());
	}
});

This callback will receive two parameters, suggestion item value and the text value entered by user. Both parameters can be used to do custom matching and return non zero value to let that suggestion appear in suggestions list.

Instantiating

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();
});