create a specific tag when user press "," after write some text

Question

I have a textarea for assigning a task in which users can assign multiple task at a time with "," seperate. When the user press "," I want the previously written task to show just like a tags.

it just like when we post question on this site and select tags like "html", "jquery", then a specific field created and a cross button also.

but these show after searching but I want when user write their task and press, then it happend.

<tr>
        <td colspan="2"><textarea placeholder="Current Tasks: Read a book" rows="10" id="task" name="task"></textarea>
                        </td>
                    </tr>

Refer this http://stackoverflow.com/questions/519107/jquery-autocomplete-tagging-plug-in-like-stackoverflows-input-tags — Sridhar R, Mar 20 '14 at 10:20
Also refer to: http://stackoverflow.com/questions/302122/jquery-event-keypress-which-key-was-pressed — MarkP, Mar 20 '14 at 10:21
i don't want to auto complete. it will fill by user and there is not list to auto complete. — Jitendra, Mar 20 '14 at 10:22
just check this one. http://aehlke.github.io/tag-it/examples.html @Jitendra — Sumit Pathak, Mar 20 '14 at 10:29

score 3 · Answer 1 · edited May 23 '17 at 12:11

I am refering you to similar answered question. click Tags to visit the page

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)

Answer looks to be updated now. No longer warrants a -1 so up-voting. — Matt Tester, Mar 21 '14 at 07:48

score 2 · Answer 2 · answered Mar 20 '14 at 10:24

Try this

Reference http://xoxco.com/projects/code/tagsinput/

Include these files in <head> section

<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript">
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript">
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css" rel="stylesheet">
<script src="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.js" type="text/javascript">
<link href="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.css" type="text/css" rel="stylesheet">

HTML

<p><label>Text:</label>
<input id="tags_1" type="text" class="tags" value="foo,bar,baz,roffle" /></p>

Script

$(function() {
$('#tags_1').tagsInput({width:'auto'});
});

DEMO

create a specific tag when user press "," after write some text

2 Answers2