
amsify.suggestags is a simple jQuery tag/token input plugin which converts the regular input into a multi-select, auto-suggesting tagging system.
Compatible with the most 3rd framework such as Bootstrap 4/3, Materialize, etc.
1. Download the latest release and include the following JavaScript and CSS files in your page:
<!-- jQuery CDN --> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <!-- Amsify Plugin --> <link rel="stylesheet" href="/css/amsify.suggestags.css"> <script src="/js/jquery.amsify.suggestags.js"></script>
2. Create a normal input field on the page and specify the pre-selected tags in the value
attribute (optional).
<input type="text" name="color" value="Orange,Black">
3. Attach the plugin to the input field and specify an array of auto suggestions (optional).
$('input[name="color"]').amsifySuggestags({ type : 'amsify', suggestions: ['Black', 'White', 'Red', 'Blue', 'Green', 'Orange'] });
4. Use a 3rd framework to style 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 maximum number tags allowed to enter. Default: 5.
$('input[name="color"]').amsifySuggestags({ type : 'bootstrap', suggestions: ['Black', 'White', 'Red', 'Blue', 'Green', 'Orange'], tagLimit: 3 });
6. Customize the appearance of the selected tags.
$('input[name="color"]').amsifySuggestags({ type : 'bootstrap', suggestions: ['Black', 'White', 'Red', 'Blue', 'Green', 'Orange'], classes: [], backgrounds: [], colors: [] });
7. Sometimes you might need to block custom tags that are not listed in the auto suggestions.
$('input[name="color"]').amsifySuggestags({ type : 'bootstrap', suggestions: ['Black', 'White', 'Red', 'Blue', 'Green', 'Orange'], whiteList: true });
8. 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 }, });
This awesome jQuery plugin is developed by amsify42. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 16.08.2018
- Source