Bootstrap-TagsInput 确认键不起作用
Bootstrap-TagsInput confirmKeys don't work
我无法获得默认的 Bootstrap-TagsInput confirmKeys
,即 enter
= 13
或 comma
= 188
,开箱即用。无论有无 Typeahead.js,都是如此。确认键允许您通过单击该键来创建标签。
我认为问题在于标签是字符串还是对象。如果您查看 the Tagsinput demo,"Typeahead" 示例允许使用默认的 confirmKeys
、enter
或 comma
创建标签,但 "Objects as Tags" 示例是正确的下面没有。
知道如何使 confirmKeys
使用对象标签吗?
我必须编辑 Bootstrap-tagsinput 库才能完成这项工作。
这是我 added/commented 在图书馆里的东西:
//self.options.freeInput = false; //notice commented out
//... (lots of lines between)
if (self.options.freeInput && (keyCombinationInList(event, self.options.confirmKeys) || maxLengthReached)) {
// Only attempt to add a tag if there is data in the field
if (text.length !== 0) {
//<<<<< BEGIN code block added
//self.add(maxLengthReached ? text.substr(0, self.options.maxChars) : text); //notice commented out
var item2 = self.$input.val();
if (self.objectItems) {
var beforeFreeInputItemAdd = $.Event('beforeFreeInputItemAdd', { item: item2, cancel: true });
self.$element.trigger(beforeFreeInputItemAdd);
if (beforeFreeInputItemAdd.cancel)
return;
item2 = beforeFreeInputItemAdd.item;
}
self.add(item2);
self.$input.val('');
// $input.val(''); //>>>>>> END code block added
}
}
然后在代码库中任何想要使用这个库修改的地方我添加了这个:
var id_increment = 1;
$("#my-tagsinput-field").on('beforeFreeInputItemAdd', function(event) {
event.item = {'name': event.item, 'id': 'new-'+id_increment};
event.cancel = false;
id_increment++;
});
对我来说,解决方案是在配置中包含 freeInput,例如
$( 'input[type="tags"]' ).tagsinput(
{
typeaheadjs: [{
minLength: 1,
highlight: true
},
{
limit: 99,
name: type,
displayKey: 1,
valueKey: 'name',
source: sourcefunc,
templates: { suggestion: suggestionsfunc }
}],
freeInput: true
});
并在标签输入源代码中将以下内容更改为 false。
cancelConfirmKeysOnEmpty: false,
这是我的第 24 行。
2022 年,Bootstrap 版本 2.3.1:
https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
输入此代码:
$('input').tagsinput({
confirmKeys: [13, 44, 32]
});
在 <script>
之内,但在 $(document).ready({...
之外
按键:13 - 输入; 44 - 逗号; 32 - 空格键。
您还应该将 $('input')
更改为 $('your_input_class_or_id')
,并且不要忘记 # 或 。在开头 $('#your_...
或 $('.your_...
我无法获得默认的 Bootstrap-TagsInput confirmKeys
,即 enter
= 13
或 comma
= 188
,开箱即用。无论有无 Typeahead.js,都是如此。确认键允许您通过单击该键来创建标签。
我认为问题在于标签是字符串还是对象。如果您查看 the Tagsinput demo,"Typeahead" 示例允许使用默认的 confirmKeys
、enter
或 comma
创建标签,但 "Objects as Tags" 示例是正确的下面没有。
知道如何使 confirmKeys
使用对象标签吗?
我必须编辑 Bootstrap-tagsinput 库才能完成这项工作。
这是我 added/commented 在图书馆里的东西:
//self.options.freeInput = false; //notice commented out
//... (lots of lines between)
if (self.options.freeInput && (keyCombinationInList(event, self.options.confirmKeys) || maxLengthReached)) {
// Only attempt to add a tag if there is data in the field
if (text.length !== 0) {
//<<<<< BEGIN code block added
//self.add(maxLengthReached ? text.substr(0, self.options.maxChars) : text); //notice commented out
var item2 = self.$input.val();
if (self.objectItems) {
var beforeFreeInputItemAdd = $.Event('beforeFreeInputItemAdd', { item: item2, cancel: true });
self.$element.trigger(beforeFreeInputItemAdd);
if (beforeFreeInputItemAdd.cancel)
return;
item2 = beforeFreeInputItemAdd.item;
}
self.add(item2);
self.$input.val('');
// $input.val(''); //>>>>>> END code block added
}
}
然后在代码库中任何想要使用这个库修改的地方我添加了这个:
var id_increment = 1;
$("#my-tagsinput-field").on('beforeFreeInputItemAdd', function(event) {
event.item = {'name': event.item, 'id': 'new-'+id_increment};
event.cancel = false;
id_increment++;
});
对我来说,解决方案是在配置中包含 freeInput,例如
$( 'input[type="tags"]' ).tagsinput(
{
typeaheadjs: [{
minLength: 1,
highlight: true
},
{
limit: 99,
name: type,
displayKey: 1,
valueKey: 'name',
source: sourcefunc,
templates: { suggestion: suggestionsfunc }
}],
freeInput: true
});
并在标签输入源代码中将以下内容更改为 false。
cancelConfirmKeysOnEmpty: false,
这是我的第 24 行。
2022 年,Bootstrap 版本 2.3.1:
https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
输入此代码:
$('input').tagsinput({
confirmKeys: [13, 44, 32]
});
在 <script>
之内,但在 $(document).ready({...
按键:13 - 输入; 44 - 逗号; 32 - 空格键。
您还应该将 $('input')
更改为 $('your_input_class_or_id')
,并且不要忘记 # 或 。在开头 $('#your_...
或 $('.your_...