Create Quick AutoComplete Tag Selector Using jQuery Tagator Plugin

Last updated Jul 9, 2019

In this tutorial I am going to introduce awesome jQuery plugin (Tagator) to create quick autoComplete tag selector, You can easily configure this plugin in your existing sites to add auto-suggest tag selected feature, It will help your user to choose any types of related tags with auto-complete support As you have seen this feature on many websites You can choose your multiple skill set by select autoComplete Tag selector input box. Tagator is a jQuery-based replacement for input boxes, making them tagging boxes. It supports searching, and affects the original input box directly, which is used as a comma serparated data container.

Integrate AutoComplete Tag Selector On Your Website.

Use following few steps to easily configure Tagator – AutoComplete Tag Selector Plugin on your HTML Forms.

Libraries

Include required libraries on page like Plugins CSS+JS library with jquery latest library.

<!--CSS-->
<link rel="stylesheet" href="fm.tagator.jquery.min.css"/>
 
<!--JS-->
<script   src="https://code.jquery.com/jquery-3.2.1.min.js"   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>
<script src="fm.tagator.jquery.js"></script>

HTML

Create simple input box with some data attribute with auto complete values you can dynamically add these values by using PHP, MYSql and pass these values in javascript array format to display AutoComplete Tag Selector Feature.

<input style="width:300px;" type="text" class="tagator" value="PHP, Javascript" data-tagator-show-all-options-on-focus="true" data-tagator-autocomplete="['WordPress', 'Jquery', 'HTML', 'CSS', 'NodeJs', 'Joomla', 'Java']">

There is 2nd method to make AutoComplete Tag Selector by using Plugins jquery function.

Suppose you have html input box.

<input id="demo" name="tags" value="PHP,JavaScript,Nodejs" placeholder="Please input some tags">

JS

Initialize the tag input and define an array of tag suggestions for the autocomplete feature.

$('#demo').tagator({
  autocomplete: ['WordPress', 'Java', 'Joomla']
});

See live demo and download source code.

DEMO | DOWNLOAD

See official github repository for more information and follow for future updates. Don’t forget to read license for using above plugin in your commercial project.

AutoComplete jquery