This is Our Blog

May 3, 2016

Tagging handle multi-tag fields as well as tag suggestions/autocomplete and custom tags


  1. Navigate to manage nugget packages and search for tag-it
  2. Tag-it Author should be Alex Aehlke if found install it, in my project it is already installed.
  3. Add following file from scripts dir to layout page or wherever needed.
    1. <script src=”scripts/tag-it.js” type=”text/javascript” charset=”utf-8″></script>
    2. Note:- make sure jquery files already exist in project above of this file.
  4. Add following css files in your layout page or wherever needed
    1. <code><span style="color:#333333; font-family:Consolas">&lt;link rel="stylesheet" type="text/css" href=""&gt; //this is one is for theme.
    2. <code><span style="color:#333333; font-family:Consolas">&lt;link href="css/jquery.tagit.css" rel="stylesheet" type="text/css"&gt;
  5. Now add a <ul> tag in html or cshtml page like following in body area
    1. <ul id=”methodTags”></ul>
  6. Now add following java script function on document ready and call it whenever you have data in your array before page rendring

function ()


var ArrayDemo = [‘xx’,’yy’,’ab’,’tag1′, ‘tag2’];


    // in following commented lines I am assigning data in array from database table got from angular ajax call in saltsAll variable.

// for (var i = 0; i < $scope.saltsAll.length; i++) {

// ArrayDemo.push($scope.saltsAll[i].Title);

// }


        availableTags: ArrayDemo




Now you are almost done with code run your page and enjoying tagging in ul control.






Would you like to share your thoughts?

Would you like to share your thoughts?

Leave a Reply

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