How to use tag-it

Aravindhan picture Aravindhan · Dec 24, 2012 · Viewed 8.4k times · Source

I am using tagit library from here I created the tagit which working correctly and i created the array as follows:

    $("#name).tagit({
    itemName: "teamId",
    fieldName: "teamName",
    availableTags: array,
    allowSpaces:true,
    caseSensitive:false,
    removeConfirmation:true,
    placeholderText:"Tag Group..."
     });

           var a =["1","2","3","4"];

while using the tag-it all options can be selected correctly ....I want that the tag "4" has to appear as default selection before choosing any option how can i do this..

Additional information:

there is a option available in the source to create the new tag

       $("#myTags").tagit("createTag", "my-tag");

It is also not working for me....

Answer

TJ- picture TJ- · Dec 24, 2012

If I understand your problem, there are a couple of javascript errors that may be preventing you from seeing what you expect to see.

  • Define the array before using it. Secondly, array referred to is named as 'array' while the array defined is 'a'.
  • "#name --> This is missing the closing quote.
  • $("#myTags").tagit("createTag", "my-tag"); is not working before the id of your ul is 'name' while you are trying to use createTag on myTags.

For your first problem, you can use one of these:

(1 and 2 may not be fully utilizing the potential of tagit library.)

1) Already initialize your list with an element '4'. Something like this in your html :

<ul id="name">
   <li>4</li>
</ul>

2) Create the element '4' already in your html.

var array = ["1", "2", "3", "4"];
$('#name').append('<li>' + array[3] +'</li>');

3) Use the createTag : $("#name").tagit("createTag", "4");

Complete working example, with all the options used:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/tag-it.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#myTags").tagit();

        var array = ["1", "2", "3", "4"];
        $('#name').append('<li>' + array[3] +'</li>'); //Using Option 2
        $("#name").tagit({
            itemName: "teamId",
            fieldName: "teamName",
            availableTags: array,
            allowSpaces:true,
            caseSensitive:false,
            removeConfirmation:true,
            placeholderText:"Tag Group..."
        });
        $("#name").tagit("createTag", "NewTag");  //Using option 3
    });
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<link href="css/jquery.tagit.css" rel="stylesheet" type="text/css">
</head>
<body>
    <ul id="name">
       <li>0</li>  <!-- Using option 1 -->
    </ul>
</body>
</html>