Creating tags using jquery

Question

First see this example http://jsfiddle.net/Es5qs/ in this example by keeping space as delimiter i creating tags, but what i wanted is when i type something on textbox1 it should reflect as tags in textbox2 hear is my code, How can i do this.

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script src="jquery-ui.js"></script>

<script>

$(document).ready(function() {

    $("#textBox").keyup(function() {

        $("#message").val(this.value);
    });


});

$(document).ready(function() {

  //The demo tag array
  var availableTags = [
    {value: 1, label: 'tag1'},
    {value: 2, label: 'tag2'},
    {value: 3, label: 'tag3'}];

  //The text input
  var input = $("input#text");

  //The tagit list
  var instance = $("<ul class=\"tags\"></ul>");

  //Store the current tags
  //Note: the tags here can be split by any of the trigger keys
  //      as tagit will split on the trigger keys anything passed  
  var currentTags = input.val();

  //Hide the input and append tagit to the dom
  input.hide().after(instance);

  //Initialize tagit
  instance.tagit({
    tagSource:availableTags,
    tagsChanged:function () {

      //Get the tags            
      var tags = instance.tagit('tags');
      var tagString = [];

      //Pull out only value
      for (var i in tags){
        tagString.push(tags[i].value);
      }

      //Put the tags into the input, joint by a ','
      input.val(tagString.join(','));
    }
  });

  //Add pre-loaded tags to tagit
  instance.tagit('add', currentTags);
});
</script>
</head>
<body>
    <div>
        TextBox 1 : <input type="textbox" id="textBox"></input>
        TextBox 2 : <input type="text" id="message" name="tags"/></input>

    </div>
</body>
</html>

Wouldn't interchanging the textbox ids do this or am I not understanding your question correctly? — geekchic
– geekchic, Commented Aug 10, 2013 at 5:40
see, if you remove the second jq function (used to creating tags) textbox1 reflect it's data to textbox2, as i showed in example what ever data i will type in textbox (see link) it creating tags (for every word with space as delimiter). Now if any data in textbox1 followed by space should create tags in textbox2 — user2617574
– user2617574, Commented Aug 10, 2013 at 5:50
jsfiddle.net/rajeshhatwar/cxtEx see this link, hear i able to get as i want but when i type like 'being human' it create two tags in textbox2 but it not showing any thing in textbox1 (by clicking on space it clearing textbox) pleas give me a solution — user2617574
– user2617574, Commented Aug 10, 2013 at 6:16

Stefan Breunig · Accepted Answer · 2013-08-10 06:35:44Z

2

demo in jsfiddle. The main idea is to look at the whole string each time and simply re-create all elements. This saves you from duplication checks and whatnot. As long as you don’t want to process huge amounts of text, it doesn’t matter performance wise.

I exchanged keypress with keydown to capture backspace as well. Further, it executes on every key, instead of only on space. Inside the keydown listener:

    tags = this.value.split(/\s+/);
    $(".target").html(""); //clear
    $.each(tags, function (ind, tag) {
        $(".target").append("<a href='#' class='tag'>" + tag + "</a>");
    });

First, the input in the first textbox is split on spaces. The regular expression matches successive spaces as well. This way human being still only creates two tags. Next, the target is cleared of previous tags. Lastly, we iterate over all available tags and create the link elements for them.

Note: I didn’t change the way you create these tags. I strongly recommend to switch to something like $(".target").append($("<a href='#' class='tag'>").text(tag));. This escapes input, so users can’t break the site by including HTML tags. For example, try what happens if you input <b> into the jsfiddle demo.

answered Aug 10, 2013 at 6:35

Stefan Breunig

7067 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2617574 Over a year ago

Ok thanks for this , can i have closing option for created tags as i shown in first link jsfiddle.net/Es5qs this is checking duplicates also

Stefan Breunig Over a year ago

I’ve updated the jsfiddle with a quick and dirty solution to show you how I’d go about it. Main idea is to extract the text from the tag and use string-replace on the input textbox. To remove duplicates try stackoverflow.com/a/10192255/1684530 on the tags array.

Relm Over a year ago

Thanks, Really helpful, always wondered how the logic worked.

Collectives™ on Stack Overflow

Creating tags using jquery

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related