This is a JQuery plugin for input tags with auto complete suggestion.
$('input').amsifySuggestags();
npm i suggestags
- Simple
- Default Value
- Suggestions
- Suggestions Through Ajax
- White List
- Custom Stylings
- Callbacks and Events
- Tag Limit
- Refresh Destroy
- More Settings
- Instantiating
For simple initialization
<input type="text" class="form-control" name="country"/>
$('input[name="country"]').amsifySuggestags();
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();
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.
We can also get suggestions through Ajax
<input type="text" class="form-control" name="country"/>
$('input[name="country"]').amsifySuggestags({
suggestionsAction : {
url: 'https://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: 'https://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.
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
});
<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"
}
]
}
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
});
We can also set tags limit
$('input[name="country"]').amsifySuggestags({
tagLimit: 5
});
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');
$('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
This will show message when there is no suggested item appears matching the input.
$('input[name="country"]').amsifySuggestags({
noSuggestionMsg: 'Enter to generate new tag'
});
This will show all the suggestion item on input focus. By default this is false
$('input[name="country"]').amsifySuggestags({
showAllSuggestions: true
});
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
});