阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 bootstrap tokenfield 中文API文档

      插件 bootstrap tokenfield 中文API文档

      源码 & 下载

      Twitter的Bootstrap的jQuery标记/标记输入插件,来自Sliptree

      用法

      $('input').tokenfield()
      

      特征

      • 使用Ctrl + C和Ctrl + V复制和粘贴标记
      • 键盘导航,用键盘删除令牌(箭头键,Shift +箭头键)
      • 使用Ctrl +单击并按住Shift并单击选择特定标记
      • Twitter Typeahead和jQuery UI Autocomplete支持

      常问问题

      如何防止输入重复的令牌?

      您可以使用该tokenfield:createtoken事件。检查event.attrs属性是否有标记值和标签,然后运行重复检测逻辑。如果它是重复的令牌,那就干脆做event.preventDefault()。

      这是一个简单的示例,用于检查令牌的值是否等于任何现有令牌的值。

      $('#my-tokenfield').on('tokenfield:createtoken', function (event) {
      	var existingTokens = $(this).tokenfield('getTokens');
      	$.each(existingTokens, function(index, token) {
      		if (token.value === event.attrs.value)
      			event.preventDefault();
      	});
      });
      

      如何将令牌限制为我的先行/自动完成数据?

      同样,使用时tokenfield:createtoken,您可以检查自动完成/预先输入数据中是否存在令牌。此示例检查给定标记是否已存在,如果不存在则停止其输入。

      $('#my-tokenfield').on('tokenfield:createtoken', function (event) {
      	var available_tokens = bloodhound_tokens.index.datums
      	var exists = true;
      	$.each(available_tokens, function(index, token) {
      		if (token.value === event.attrs.value)
      			exists = false;
      	});
      	if(exists === true)
      		event.preventDefault();
      })
      
      目录
      目录