CODEWITHSUNDEEP
jqueryjquery-uijquery-plugins
user2617574
user2617574

Reputation: 109

Creating tags using jquery

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>

Upvotes: 1

Views: 4305

Answers (1)

Stefan Breunig
Stefan Breunig

Reputation: 706

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.

Upvotes: 2

Related Questions