帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jquery(Tagify)tags标签输入插件

帝国模板之家 2020-11-07 网页特效 评论

Tagify是一轻量级的jQuery插件,可以从input或textarea输入文字,生成简单、高性能、动画的tags标签。还提供了一个JavaScript版本,使用纯JavaScript实现标签输入。

特征:

  • 自动防止重复标记

  • 通过逗号或Enter键将输入文本自动拆分为tags。

  • 兼容bootstrap3和bootstrap4

使用方法:

1. 加载tagify.css主样式表文件

<link href="tagify.css" rel="stylesheet">

2.在jQuery之后加载jQuery.tagify.js文件

<script src="jquery.min.js"></script>
<script src="jQuery.tagify.js"></script>

3. 如果您想用纯JavaScript实现Tagify,还可以包含vanilla JS版本。

<script src="tagify.js"></script>

4. 为输入tags创建一个input字段或textarea字段。设置value属性,来预定义tags值:

<input name="tags" placeholder="write some tags" value="predefined tags here">

5. 初始化Tagify插件。

// jQuery
$('[name=tags]').tagify();

// Vanilla JavaScript
var input = document.querySelector('input[name=tags]'),
tagify = new Tagify( input );

6. 设置重复检测

$('[name=tags]').tagify({duplicates : false});

7. 更多配置选项

$('[name=tags]').tagify({

  // tag data Object property which will be displayed as the tag's text
  tagTextProp: 'value',

  // placeholder text
  placeholder: '',

  // [regex] split tags by any of these delimiters ("null" to cancel)
  delimiters: ",", 

  // regex pattern to validate input by. 
  pattern: null, 

  // use 'select' for single-value dropdown-like select box
  // use 'mix' as value to allow mixed-content
  // use 'integrated' to skip the creation of the wrapper
  // the 'pattern' setting must be set to some character.
  mode: null,

  mixMode: {
    insertAfterTag: '\u00A0', // node or string to add after a tag added
  }

  // interpolation for mix mode
  // everything between these will become a tag
  mixTagsInterpolator: ['[[', ']]'],

  // define conditions in which typed mix-tags content is allowing a tag to be created after.
  mixTagsAllowedAfter: /,|\.|\:|\s/,

  // maximum number of tags
  maxTags: Infinity, 

  // number of clicks on a tag to enter "edit" mode
  // only 1 or 2 work. false or null will disallow editing
  editTags: 2

  // exposed callbacks object to be triggered on certain events
  callbacks: {}, 

  // automatically adds the text which was inputed as a tag when blur event happens
  addTagOnBlur: true, 

  // allow tuplicate tags
  duplicates: false, 

  // trim the tag's value
  trim: true,

  // is this list has any items, then only allow tags from this list
  whitelist: [], 

  // a list of non-allowed tags
  blacklist: [], 

  // should ONLY use tags allowed in whitelist
  enforceWhitelist: false, 

  // tries to autocomplete the input's value while typing
  autoComplete: {
    enabled: true,
    rightKey: false // If true, when → is pressed, use the suggested value to create a tag, else just auto-completes the input. In mixed-mode this is ignored and treated as "true"
  }, 

  // String - when tags have multiple properties, and for each tag another property should be used besides the "value"
  mapValueToProp: "", 

  dropdown: {
    classname: '',
    enabled: 2, // minimum input characters needs to be typed for the dropdown to show
    maxItems: 10,
    caseSensitive: false,
    fuzzySearch: true,
    accentedSearch: true,
    position: 'null', // 'manual' - will not render the dropdown, and you would need to do it yourself; 'text' - will place the dropdown next to the caret; 'input' - will place the dropdown next to the input; 'all' - normal, full-width design
    highlightFirst: false,
    closeOnSelect: true,
    clearOnSelect: true,
    mapValueTo: function(){}, // this setting controlls which data key will be printed in the dropdown
    searchKeys: ["value", "searchBy"],
    appendTarget: document.body
  }

  // object consisting of functions which return template strings
  templates: {wrapper, tag, dropdownItem},

  // take a tag input as argument and returns a transformed value
  transformTag: undefined,

  // if true, do not remove tags which did not pass validation
  keepInvalidTags: false,

  // skip invald tags
  skipInvalid: false,

  // true - remove last tag; edit - edit last tag
  backspace: true,

  // if you wish your original input/textarea value property format to other than the default (which I recommend keeping) you may use this and make sure it returns a string.
  originalInputValueFormat: function(){},
  
});

8. API方法

var myInput = $('[name=tags]').tagify();

// adds new tag
// String (word, single or multiple with a delimiter) or an Array of Objects
myInput.addTags();

// removes a specific tag
myInput.removeTag(DOM);

// removes all tags
myInput.removeAllTags();

// destroy the plugin
myInput.destroy();

// converts the input's value into tags. This method gets called automatically when instansiating Tagify. Also works for mixed-tags
myInput.loadOriginalValues(String/Array);

// returns an Array of found matching items (case-insensitive)
myInput.getWhitelistItemsByValue(Object);

// returns the index of a specific tag, by value
myInput.getTagIndexByValue();

// returns the first matched tag node, if found
myInput.getTagElmByValue();

// returns how many tags already exists with that value
myInput.isTagDuplicate();

// converts a String argument ([[foo]]⁠ and [[bar]]⁠ are..) into HTML with mixed tags & texts
myInput.parseMixTags();

// returns a DOM nodes list of all the tags
myInput.getTagElms();    

// returns a specific tag DOM node by value
myInput.getTagElmByValue();

// set/get tag data on a tag element (has.tagify__tag class by default)
myInput.tagData(HTMLElement, Object);

// goes to edit-mode in a specific tag
myInput.editTag( HTMLElement); 

// exit a tag's edit-mode. if "tagData" exists, replace the tag element with new data and update Tagify value
myInput.replaceTag(tagElm, Object (tagData));

// toogle loading state on/off (Ex. AJAX whitelist pulling)
myInput.loading();

// same as above but for a specific tag element
myInput.tagLoading(HTMLElement, Boolean);

// returns a tag element from the supplied tag data
myInput.createTagElem(Object (tagData));

// injects text or HTML node at last caret position. range parameter is optional
myInput.injectAtCaret(HTMLElement (injectedNode), Object (range)); 

// places the caret after a given node
myInput.placeCaretAfterNode(HTMLElement);

// whatever to insert after
myInput.insertAfterTag(HTMLElement (tag element), HTMLElement/String);

// toggles tagify--invalid class to the Tagify wrapper element
myInput.toggleInvalidClass();

// adds all whitelist items as tags and close the suggestion dropdown
myInput.dropdown.selectAll();

// iterates tag DOM nodes and re-build the tagify.value array (call this if tags get sorted manually)
parseTemplate String/Function (template name or function), Array (data) converts a template string (by selecting one from the settings.templates by name or supplying a template function which returns a String) into a DOM node
myInput.updateValueByDOMTags(); 

9. 事件


var myInput = $('[name=tags]').tagify();

// e.type, e.detail, ...
myInput
.on('add', function(e){
  // on add
})

.on('removeTag', function(e){
  // on remove
})

.on('change', function(e){
  // on change
})

.on('invalid', function(e){
  // on invalid
})

.on('input', function(e){
  // on input
})

.on('click', function(e){
  // on click
})

.on('dblclick', function(e){
  // on dblclick
})

.on('keydown', function(e){
  // on keydown
})

.on('focus', function(e){
  // on focus
})

.on('blur', function(e){
  // on blur
})

.on('edit:input', function(e){
  // on blur
})

.on('edit:beforeUpdate', function(e){
  // on blur
})

.on('edit:updated', function(e){
  // on blur
})

.on('edit:start', function(e){
  // on blur
})

.on('edit:keydown', function(e){
  // on blur
})

.on('dropdown:show', function(e){
  // on blur
})

.on('dropdown:hide', function(e){
  // on blur
})

.on('dropdown:select', function(e){
  // on blur
})

.on('dropdown:scroll', function(e){
  // on blur
})

.on('dropdown:noMatch', function(e){
  // on blur
})

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家

只想记住美好的事物,而忘记不幸的事物,其实是种贪婪,这样反而会很难放空自己的思想。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言