我需要一个允许自由文本的多行文本框,但如果我启动输入字符：“@@”
应显示带有可用标签的自动完成框,并允许我从现有标签中选择标签,标签名称中不应出现“@@”字符.
应显示带有可用标签的自动完成框,并允许我从现有标签中选择标签,标签名称中不应出现“@@”字符.
目前我正在使用tag-it plugin for jquery UI,但无法弄清楚如何允许自由文本,只有shw自动完成框“@@”输入.以及如何使用textarea而不是常规输入.
另外,我想强迫他们从列表中选择是否输入@@并且不允许输入自由文本(第一个可用的选择会很好)
使用Javascript：
$(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);
});
HTML：
<p>This example shows how to use Tagit on an input!</p> <input type="text" id="text" name="tags" value="one,two,three"/>
解决方法
既然你已经使用了tag-it插件..我已经在输入中添加了一些处理程序来处理
> @@在您键入时显示自动完成
>如果没有@@打字,请提供免费文字
如果键入@@,我仍然需要时间查看“不允许自由文本”
演示：http://jsfiddle.net/xBgfJ/2/及以下是完整代码,
$(document).ready(function() {
//The demo tag array
var availableTags = [{value: 1,{ value: 2,{ 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,'
input.val(tagString.join(','));
},onTagAdded: function() {
inpNext.parent().find('.pre-filter').remove();
}
});
//Add pre-loaded tags to tagit
instance.tagit('add',currentTags);
var inpNext = input.next();
var autoCompelteMenu = $('.ui-autocomplete',inpNext);
inpNext.on('keydown','.tagit-input',function(e) {
var $parent = $(this).parent();
var $preFilter = $parent.find('.pre-filter');
if (e.which == 8 && this.value == '') { //backspace
$preFilter.remove();
} else if (e.which == 9 || e.which == 32
|| e.which == 188 || e.which == 44 ||
e.which == 13 ) { //tab or space,comma and enter
$preFilter.remove();
autoCompelteMenu.css('opacity',0);
}
}).on('keypress',function(e) {
var $parent = $(this).parent();
var $preFilter = $parent.find('.pre-filter');
if (e.which == 64 && !$preFilter.length) {
$parent.prepend('<span class="pre-filter hidden">@</span>');
autoCompelteMenu.css('opacity',0);
} else if ( e.which == 64 && $preFilter.length) {
e.preventDefault();
this.value = '';
$preFilter.append('@').removeClass('hidden');
autoCompelteMenu.css('opacity',1);
}
return;
}).on('blur',function() {
$(this).parent().find('span').remove();
autoCompelteMenu.css('opacity',0);
});
});
