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.

Libraries

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

<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">
 

<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).

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.

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

Related