Bootstrap 4标签输入-仅从预定义列表中添加标签

时间:2018-09-22 07:49:16

标签: javascript jquery html5 bootstrap-4 bootstrap-tags-input

我正在使用Bootstrap 4Bootstrap 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>

3 个答案:

答案 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;
  }
});
  1. 启动Eventlistener,捕获事件“在添加项目之前”
  2. 如果预定义列表不包含添加的项目,请将取消variable设置为true,这样就不会添加
  3. 自ES6开始存在。 ES5与indexOf配合使用(如果不匹配,则返回-1)

答案 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');