2014-03-20 2 views
1

У меня есть текстовое поле для назначения задачи, в которой пользователи могут назначать несколько задач одновременно с помощью «,» отдельно. Когда пользователь нажимает ",", я хочу, чтобы ранее написанная задача отображалась точно так же, как теги.создать конкретный тег, когда пользователь нажимает «,» после записи некоторого текста

Это просто, когда мы отправляем вопрос на этот сайт и выбираем теги типа «html», «jquery», затем создаем определенное поле и крест-кнопку.

но это шоу после поиска, но я хочу, чтобы пользователь записывал свою задачу и нажимал, тогда это произошло.

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

см это http://stackoverflow.com/questions/519107/ JQuery-автозаполнения пометка-плагин-как-STA ckoverflows-input-tags –

+0

См. также: http://stackoverflow.com/questions/302122/jquery-event-keypress-which-key-was-pressed – MarkP

+0

Я не хочу, чтобы авто завершалось. он будет заполняться пользователем и нет списка для автоматического завершения. – Jitendra

ответ

3

Я ссылаюсь на аналогичный вопрос. нажмите Tags посетить страницу

Затем в коде,

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

(Отказ от ответственности) Я использовал стили из тегов SO, как и это:

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; 
    } 

Демо: http://jsfiddle.net/hungerpain/Wky2Z/

Чтобы добавить теги в массив, введите переменную, называемую тегами вне функции нажатия клавиши:

var tags = []; 

Затем, нажав клавишу, у вас есть это, если цикл вправо? Нажмите на новое значение в массив:

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

Затем, когда вам нужно сохранить его в БД, просто присоединиться к ним:

tags.join(""); 

Тогда позже, когда вы извлечь их из БД в следующий раз, вы можете обернуть те с а (то, что мы делали в функции нажатие)

+0

И лучший способ рассказать новичку - это проголосовать? – BlackPearl

+0

Ответ выглядит как обновленный. Больше не требует 1-го голосования. –

+0

Отлично, аналогично. Продвижение :) – misterManSam

2

Попробуйте

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

Включите эти файлы в разделе <head>

<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

Смежные вопросы