CODEWITHSUNDEEP
jquery-uijqueryjquery-pluginstags
Rajesh Hatwar
Rajesh Hatwar

Reputation: 1933

creating tags in textarea using jquery

i want to create tags for input data.(http://textextjs.com/manual/examples/ajax-with-filter-tags-and-autocomplete.html hear they creating tags using auto complete text box, but i don't want auto complete one)

hear is my code 

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

<script>

$(document).ready(function() {

    $("#textBox").keyup(function() {
        $("#message").val($(this).val());
    });
});

</script>
</head>
<body>
    <div>
        TextBox 1 : <input type="textbox" id="textBox"></input>
        TextBox 2 : <input type="textarea" id="message"></input>
    </div>
</body>
</html>

hear it reflect data of textbox1 to textbox2.

now what i want is : if user enter any data(words) in textbox1 followed by space then that word should convert into tags in textbox2

Upvotes: 3

Views: 5149

Answers (2)

krishwader
krishwader

Reputation: 11371

First of all type=textarea is wrong. There's no such input like that. You must be using <textarea> instead of that. Secondly, why dont you use contentditable attribute? It works just like a text area but can take HTML, is supported in all browsers, and you can use it on any block element! So replace your second input with this: 

TextBox 2 : <div class="target" contenteditable="true"></div>

Then, in your code, 

$("#textBox").keypress(function (e) {
    if (e.which === 32) {
        $(".target").append("<a href='#' class='tag'>" + this.value + "</a>");
        this.value = "";
    }
});

(Disclaimer) I used the styles from SO's tags, like this : 

body {
    font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif;
}
.tag {
    color: #3E6D8E;
    background-color: #E0EAF1;
    border-bottom: 1px solid #b3cee1;
    border-right: 1px solid #b3cee1;
    padding: 3px 4px 3px 4px;
    margin: 2px 2px 2px 0;
    text-decoration: none;
    font-size: 90%;
    line-height: 2.4;
    white-space: nowrap;
}
.tag:hover {
    background-color: #c4dae9;
    border-bottom: 1px solid #c4dae9;
    border-right: 1px solid #c4dae9;
    text-decoration: none;
}

Demo : http://jsfiddle.net/hungerpain/Wky2Z/

To add the tags to an array, have a variable called tags outside the keypress function :

var tags = [];

Then, in the keypress, you've got this if loop right? Push the new value into the array : 

if (e.which === 32) {
    $(".target").append("<a href='#' class='tag'>" + this.value + "</a>");
    tags.push(this.value); //push the value in array
    this.value = "";
}

Then, when you need to save it to DB, just join them : 

tags.join("");

Then later, when you to retrieve them from DB next time, you could wrap those with the a (what we did in the keypress function)

Demo : http://jsfiddle.net/hungerpain/Wky2Z/1/

Upvotes: 3

Dhaval Bharadva
Dhaval Bharadva

Reputation: 3083

Try This: 

$(document).ready(function () {
    $("#textBox").keyup(function (e) {
        if (e.keyCode == 32) {
            $("#message").val($(this).val());
        }
        if ($(this).val() == '') {
            $("#message").val('');
        }
    });
});

JSFIDDLE DEMO

Upvotes: 1

Related Questions