Bootstrap tagsinput自定义标签插件

tagsinput是一款基于Bootstrap的自定义标签插件。该自定义标签插件提供api接口，可以将input和select元素转换为标签。并能和typehead.js插件结合，提供查询提示信息。

tagsinput.js自定义标签插件支持bootstrap 3 和 bootstrap 4。

使用方法

在页面中引入jquery和bootstrap相关文件 ，以及tagsinput.css和tagsinput.js文件。

<link href="bootstrap.css" rel="stylesheet">
<link href="tagsinput.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="typehead.min.js"></script>
<script src="tagsinput.js"></script>
                

HTML结构

使用<input>作为标签时，只需要添加data-role="tagsinput"属性即可。

<input type="text" data-role="tagsinput" value="jQuery,Script,Net">
                

使用<select>元素作为标签时，需要添加multiple data-role="tagsinput"属性。

<select multiple data-role="tagsinput">
  <option value="jQuery">jQuery</option>
  <option value="Angular">Angular</option>
  <option value="React">React</option>
  <option value="Vue">Vue</option>
</select>
                

初始化插件

你也可以动态的为input元添加标签。

$('input').tagsinput('add', { "value": 1 , "text": "jQuery"});
$('input').tagsinput('add', { "value": 2, "text": "Script"});
$('input').tagsinput('add', { "value": 3, "text": "Net"});
                

配置参数

该响应式圆形js轮播图插件的可用配置参数如下：

$('input').tagsinput({
  tagClass: 'big'
});

$('input').tagsinput({
  tagClass: function(item) {
    return (item.length > 10 ? 'big' : 'small');
  }
});

$('input').tagsinput({
    itemValue: 'id'
});

$('input').tagsinput({
  itemValue: function(item) {
    return item.id;
  }
});

$('input').tagsinput({
  itemText: 'label'
});

$('input').tagsinput({
  itemText: function(item) {
    return item.label;
  }
});

$('input').tagsinput({
  confirmKeys: [13, 44]
});

$('input').tagsinput({
  maxTags: 3
});

$('input').tagsinput({
   maxChars: 8
});

$('input').tagsinput({
   trimValue: true
});

$('input').tagsinput({
  allowDuplicates: true
});

$('input').tagsinput({
  focusClass: 'my-focus-class'
});

$('input').tagsinput({
  typeahead: {
    source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
  },
  freeInput: true
});

$('input').tagsinput({
  typeahead: {
    source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
  }
});

$('input').tagsinput({
  typeahead: {
    source: function(query) {
      return $.get('http://someservice.com');
    }
  }
});

$('input').tagsinput({
  cancelConfirmKeysOnEmpty: true
});

$('input').tagsinput({
  onTagExists: function(item, $tag) {
    $tag.hide().fadeIn();
  }
});

方法

该Bootstrap tagsinput自定义标签插件的可用方法有：

• add：添加一个标签。

  $('input').tagsinput('add', 'some tag');
  

  $('input').tagsinput('add', { id: 1, text: 'some tag' });
  

  你还可以添加第三个参数来控制添加标签的方法：

  $('input').tagsinput('add', 'some tag', {preventPost: true});
  

  $('#tags-input').on('beforeItemAdd', function(event) {
     var tag = event.item;
     // Do some processing here
  
     if (!event.options || !event.options.preventPost) {
        $.ajax('/ajax-url', ajaxData, function(response) {
           if (response.failure) {
              // Remove the tag since there was a failure
              // "preventPost" here will stop this ajax call from running when the tag is removed
              $('#tags-input').tagsinput('remove', tag, {preventPost: true});
           }
        });
     }
  });
  

• remove：删除一个标签。

  $('input').tagsinput('remove', 'some tag');
  

  $('input').tagsinput('remove', { id: 1, text: 'some tag' });
  

  你还可以添加第三个参数来控制删除标签的方法：

  $('input').tagsinput('remove', 'some tag', {preventPost: true});
  

  $('#tags-input').on('beforeItemRemove', function(event) {
     var tag = event.item;
     // Do some processing here
  
     if (!event.options || !event.options.preventPost) {
        $.ajax('/ajax-url', ajaxData, function(response) {
           if (response.failure) {
              // Re-add the tag since there was a failure
              // "preventPost" here will stop this ajax call from running when the tag is added
              $('#tags-input').tagsinput('add', tag, {preventPost: true});
           }
        });
     }
  });
  

• removeAll：删除所有的标签。

  $('input').tagsinput('removeAll');
  

• focus：使标签输入框聚焦。

  $('input').tagsinput('focus');
  

• input：获取标签输入框对象。

  var $elt = $('input').tagsinput('input');
  

• refresh：刷新标签输入框。

  $('input').tagsinput('refresh');
  

• destroy：销毁插件。

  $('input').tagsinput('destroy');
  

事件

该Bootstrap的标签输入框插件的可用事件有：

• itemAddedOnInit：在初始化时，预加载的标签会触发该事件。

  $('input').on('itemAddedOnInit', function(event) {
    // event.item: contains the item
  });
  

• beforeItemAdd：在添加一个标签之前会触发该事件。

  $('input').on('beforeItemAdd', function(event) {
    // event.item: contains the item
    // event.cancel: set to true to prevent the item getting added
  });
  

• itemAdded：添加一个标签时会触发该事件。

  $('input').on('itemAdded', function(event) {
    // event.item: contains the item
  });
  

• beforeItemRemove：在删除一个标签之前会触发该事件。

  $('input').on('beforeItemRemove', function(event) {
    // event.item: contains the item
    // event.cancel: set to true to prevent the item getting removed
  });
  

• itemRemoved：删除一个标签时会触发该事件。

  $('input').on('itemRemoved', function(event) {
    // event.item: contains the item
  });
  

该Bootstrap tagsinput自定义标签插件的github地址为：https://github.com/Nodws/bootstrap4-tagsinput