Вот, пожалуйста, http://www.spookandpuff.com/examples/tagEntry.html
Общая суть ...
- Разрешить пользователю вводить что-либо в текстовом поле
- Когда они нажимают ввод, проверьте, является ли тег новым, и если это так, добавьте значение в качестве элемента в список.
- Добавьте ссылку «удалить», чтобы тег можно было удалить из списка.
- Разрешить равномерную отправку списка тегов на сервер.
Вот код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Free Tag Entry</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//The event handler for the input:
$('#tagEntry').keypress(function(event){
if (event.keyCode == '13') { //If Enter is pressed
var newTagName = $(this).attr('value');
//Clear the helper message:
$('#tagEntryHelper').text('');
//Check if the tag exists already:
if (
!$('#addedTags > li > .tagName').filter(function(){
return $(this).text() == newTagName;
}).length
) {
//If not, add the value to the list of tags:
$('#addedTags').prepend('<li><input type="checkbox" name="tagName" value="' + newTagName + '" checked="checked"/><span class="tagName">' + newTagName + '</span> <a href="#" class="remove">Remove</a></li>');
} else {
//Tell the user they messed up:
$('#tagEntryHelper').text('You already added that tag.');
};
//Clear the input ready for the next tag
$(this).attr('value', '');
}
});
//The event handler for removing tags via a 'remove' link/icon (live is used so it works on newly added tags):
$('#addedTags .remove').live('click', function(){
$(this).closest('li').remove();
return false;
});
//An event handler for removing tags via unchecking a box
$('#addedTags :checkbox').live('change', function(){
if ($(this).not(':checked')) {
$(this).closest('li').remove();
return false;
}
})
});
</script>
</head>
<body>
<input id="tagEntry" type="text"/> <span id="tagEntryHelper"></span>
<ul id="addedTags">
</ul>
</body>
</html>
Это работает, хотя я использовал некоторые соглашения jQuery, которые облегчают чтение кода, но, вероятно, не являются лучшими в плане производительности. Если вы не ожидаете, что пользователи будут работать с тысячами тегов, я бы не стал беспокоиться - все должно быть в порядке.
Я включил флажок в список тегов - предполагая, что в конечном итоге вы захотите опубликовать содержимое списка обратно на сервер (возможно, как часть формы). Вы можете скрыть эти флажки с помощью CSS, если вы не хотите, чтобы они были видны, или вы можете использовать их в качестве механизма удаления, если хотите. В любом случае, поскольку все флажки имеют одинаковые имена, ваша форма отправит обратно список разделенных запятыми тегов (с которыми легко работать на стороне сервера).
Взгляните на демонстрацию - это то, что вы хотите?