我正在使用Bootstrap 4和Bootstrap Tags Input来选择多个类别。我想从predefined_list
现在,每当用户在输入字段中键入某些内容时,自动建议就会起作用(使用预定义的列表),并且用户可以看到建议的相关类别标签,并将其添加。
但是,用户也可以通过手动键入添加新的/自定义的任意类别标签。假设用户输入了“ Apple”或“ Banana”。类别列表也与自定义项一起提交。我希望限制用户添加新的/自定义类别,而仅从现有的自动建议类别中进行选择。
<div class="col-lg-12">
<span class="pf-title">Categories</span>
<div class="pf-field no-margin">
<input id="category-input" name="category" type="text" data-role="tagsinput">
</div>
</div>
<script type="text/javascript">
var predefined_list = ["Linux", "Mac", "Windows"]
$('#category-input').tagsInput({
'autocomplete': {
source: predefined_list
},
trimValue: true,
});
</script>
答案 0 :(得分:0)
查看示例中的Eventlisteners https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
ES6:
$('#category-input').on('beforeItemAdd', (event) => {
if(!predefined_list.includes(event.item)) {
event.cancel = true;
}
});
ES5:
$('#category-input').on('beforeItemAdd', function(event) {
if(predefined_list.indexOf(event.item) === -1) {
event.cancel = true;
}
});
variable
设置为true
,这样就不会添加答案 1 :(得分:0)
只需在选项中添加freeInput: false
<script type="text/javascript">
var predefined_list = ["Linux", "Mac", "Windows"];
$('#category-input').tagsInput({
'autocomplete': {
source: predefined_list
},
freeInput: false,
trimValue: true,
});
</script>
答案 2 :(得分:0)
$('input').tagsinput('add', 'Linux', 'Mac', 'Windows');
$('input').tagsinput('remove', 'Linux', 'Mac');
$('input').tagsinput('removeAll');