包简介

Tags input for Bootstrap 3

README 文档

README

Tags input for Bootstrap 3

Installation

$ npm install bootstrap-tagsinput-plugin
$ bower install bootstrap-tagsinput-plugin
$ yarn add bootstrap-tagsinput-plugin
$ composer require bootstrap-tagsinput-plugin

Usage example

For example use the input-group:

<div class="form-group">
    <label class="control-label" for="tags">Tags:</label>
    <input id="tags" name="tags" class="form-control" placeholder="Type your tags here..." value="one, two, three" />
</div>

... and init from script:

<script type="text/javascript">
    $(document).ready(function () {
        var tags = $('input#tags').tagsinput({
            delimiter: ','
        });
    });
</script>

Options

Name	Type	Default	Description
id	string	`empty`	The widget ID if need.
delimiter	string	','	Delimiter for split tags.
inputClass	string	'.tagsinput'	Input class.
labelClass	string	'.label .label-info'	Tag label class.
autocomplete	string/boolean	`false`	Autocomplete URL.
format	string	"string"	Input/output format for autocomplate.
minInput	integer	2	Min input lenght for add tag.
maxTags	integer	10	Max tags count.
templates	array	{inputWrapper, inputField, tagItem etc. }	Templates array for widget.
onChange	function	`onChange()`	The function that is called when input change.
onShow	function	`onShow()`	The function that is called when widget is ready to be displayed.
onShown	function	`onShown()`	The function that is called when widget is displayed.
onHide	function	`onHide()`	The function that is called when widget to prepare for hiding.
onHidden	function	`onHidden()`	The function that is called when widget is hidden.
onAddTag	function	`onAddTag()`	The function is called when a new tag is added to the collection.
onRemoveTag	function	`onRemoveTag()`	The function is called when the tag is removed from the collection.
onAutocompleteSuccess	function	`onAutocompleteSuccess()`	The function is called when autocomplete successfully called an ajax request.
onAutocompleteError	function	`onAutocompleteError()`	The function is called when autocomplete caused an ajax error.
onAutocompleteShow	function	`onAutocompleteShow()`	The function that is called when autocomplete is ready to be displayed.
onAutocompleteShown	function	`onAutocompleteShown()`	The function that is called when autocomplete is displayed.
onAutocompleteHide	function	`onAutocompleteHide()`	The function that is called when autocomplete to prepare for hiding.
onAutocompleteHidden	function	`onAutocompleteHidden()`	The function that is called when autocomplete is hidden.
debug	boolean	`false`	Flag if need debug in console log.

Templates

Name	Type	Default value	Description
inputWrapper	string	`<div class="bootstrap-tagsinput" />`	Template for widget wrapper.
inputField	string	`<input type="text" autocomplete="false" />`	The autocomplete field.
tagItem	string	`<span class="tag" />`	The tag template.
tagRemoveLink	string	`<a href="#" class="remove" data-dismiss="tag" aria-hidden="true">[x]</a>`	Link for remove tag.
autocompleteList	string	`<div class="autocomplete dropdown-menu" />`	Autocomplete dropdown list.
autocompleteItem	string	`<li><a class="item" href="#" /></li>`	Autocomplete dropdown item.

Status and version

v.1.0.3 - Added README.md
v.1.0.2 - Some bugfixies. Backward compatibility $.ajax for older jQuery version.
v.1.0.1 - Added autocomplete.
v.1.0.0 - Added base plugin and stylesheets, example.

wdmg/bootstrap-tagsinput-plugin 适用场景与选型建议

wdmg/bootstrap-tagsinput-plugin 是一款基于 JavaScript 开发的 Composer 扩展包，目前已累计 31 次下载、GitHub Stars 达 1，最近一次更新时间为 2019 年 12 月 07 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「bootstrap」「twitter-bootstrap」「select」「dropdown」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 wdmg/bootstrap-tagsinput-plugin 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 wdmg/bootstrap-tagsinput-plugin 我们能提供哪些服务？

定制开发 / 二次开发

基于 wdmg/bootstrap-tagsinput-plugin 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发