How to use tag-it | 易学教程

问题

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

回答1:

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>

来源：https://stackoverflow.com/questions/14022016/how-to-use-tag-it

标签

jquery

jquery-ui

tag-it