Jquery Suggestags is a simple jQuery tag/input code plugin that converts regular input tags with autocomplete suggestions.
How to make use of it:
1. Download the most recent release and embody the next JavaScript and CSS files in your web page:
<!-- jQuery CDN --> <script src="/path/to/cdn/jquery.min.js"></script> <!-- Amsify Plugin --> <link rel="stylesheet" href="/css/amsify.suggestags.css"> <script src="/js/jquery.amsify.suggestags.js"></script>
2. Create a standard input field on the web page and specify the pre-selected tags within the value
attribute (optionally available).
<input type="text" name="color" value="Orange,Black">
3. Attach the plugin to the input field and specify an array of auto strategies.
$('input[name="color"]').amsifySuggestags({ type : 'amsify', suggestions: ['Black', 'White', 'Red', 'Blue', 'Green', 'Orange'] });
// or $('input[name="color"]').amsifySuggestags({ type : 'amsify', 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} ] });
4. Use a third framework to type the tagging system.
// requires the latest Bootstrap 4 or Bootstrap 3 framework $('input[name="color"]').amsifySuggestags({ type : 'bootstrap' }); // requires the latest Materialize framework $('input[name="color"]').amsifySuggestags({ type : 'materialize' });
5. Specify the utmost quantity tags allowed to enter.
$('input[name="color"]').amsifySuggestags({ type : 'bootstrap', suggestions: ['Black', 'White', 'Red', 'Blue', 'Green', 'Orange'], tagLimit: 5 });
6. Customize the looks of the chosen tags.
$('input[name="color"]').amsifySuggestags({ type : 'bootstrap', suggestions: ['Black', 'White', 'Red', 'Blue', 'Green', 'Orange'], defaultTagClass: '', classes: [], backgrounds: [], colors: [] });
7. Sometimes you would possibly want to dam customized tags that aren’t listed within the auto strategies.
$('input[name="color"]').amsifySuggestags({ type : 'bootstrap', suggestions: ['Black', 'White', 'Red', 'Blue', 'Green', 'Orange'], whiteList: true });
8. Decide whether or not to pick objects on hover.
$('input[name="color"]').amsifySuggestags({ selectOnHover: true });
9. Available callback function.
$('input[name="color"]').amsifySuggestags({ type : 'bootstrap', suggestions: ['Black', 'White', 'Red', 'Blue', 'Green', 'Orange'], afterAdd: function(value) { // after add }, afterRemove: function(value) { // after remove }, });
10. Get strategies by way of AJAX.
$('input[name="color"]').amsifySuggestags({ suggestionsAction : { timeout: -1, minChars:2, minChange:-1, delay: 100, type: 'GET', url: '/path/to/suggestions/', beforeSend : function() { console.info('beforeSend'); }, success: function(data) { console.info('success'); }, error: function() { console.info('error'); }, complete: function(data) { console.info('complete'); } } });
11. API strategies.
// add a new tag amsifySuggestags.addTag('Purple'); // remove a tag amsifySuggestags.removeTag('Red'); // up<a href="#!">date</a> options amsifySuggestags._settings({ // options here }) // refresh amsifySuggestags.refresh(); // destroy amsifySuggestags.destroy();
Simple Tagging System With Autocomplete, Jquery Suggestags Plugin/Github
Changelog:
v1.17.0 (2020-10-10)
- Added delay choice to for ajax suggestion
v1.16.0 (2020-05-27)
- Added customized delimiter possibility
- dealing with the required attribute
v1.16.0 (2020-05-27)
- Added customized delimiter possibility
v1.15.0 (2020-04-04)
- Allows you to kind ingredient whereas exhibiting strategies
v1.14.0 (2020-01-09)
- Using e.key if exist as an alternative of keycode
- Added extra choices
v1.10.0 (2020-01-09)
- Fixed merging objects for distinctive parts
v1.8.0 (2019-11-03)
- Can set strategies as a record of objects and stuck strategies not hiding
See Demo And Download
Official Website(amsify42): Click Here
This superior jQuery/javascript plugin is developed by amsify42. For extra Advanced Usages, please go to the official website.
Be First to Comment