jQuery Suggest Tags With Auto Complete Tagging System – jquery.amsify.suggestags

In this tutorial I am going to share simple JQuery plugin for input tags with auto complete suggestion. amsify.suggestags.js is a simple jQuery tag suggestion input plugin which converts the default input box into a multi-select, auto-suggesting tagging box. The plugin designed in bootstrap and material design framework.
jquery-suggest-tags


Libraries

Include the following libraries on page you can select design as per your need here i am going to use material design.

<!-- CDN links -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"/>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" type="text/css" href="amsify.suggestags.min.css">
 
<!-- Amsify Plugin -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="jquery.amsify.suggestags.js"></script>

HTML

Create a simple input box on the page and specify the pre-selected tags in the value attribute (optional).

<input type="text" class="form-control" name="planets" value="Earth,Mars"/>



JS

Call the plugin to the input box and specify an array for auto suggestions (optional).

$('input[name="planets"]').amsifySuggestags({
		type : 'materialize',
		suggestions: ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupitor', 'Uranus', 'Neptune', 'Pluto']
	});

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by amsify42. Visit their official github repository for more information and follow for future updates.


2 Replies to “jQuery Suggest Tags With Auto Complete Tagging System – jquery.amsify.suggestags”

  1. how can i process with Codeigniter/PHP Ajax data value auto suggest with dynamic table based data and want to add custom tag also.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.