jQuery 标签插件 Tags Input Plugin 使用实例教程

一这个插件是jquery开发的标签功能加强，生成或删除标签非常好用，还能对输入重复标签进行检查，配合JQuery autocomplete插件实现自动完成功能。官网：http://xoxco.com/projects/code/tagsinput/ 使用方法如下

 引入

<link href="../../resources/css/jquery.tagsinput.css" rel="stylesheet" type="text/css" />
一般引入<script type="text/javascript" src="../../resources/js/jquery.mytagsinput.js"></script>

此处我做了些更改，文件地址在文章末尾。

JavaScript

<script type="text/javascript"> 
    
        /***
        * @Author sonet
        * 如需更改Tags配置，请到jquery.tagsinput.js中更改
        **/
        //add tags
        function onAddTag(tag) {
            $.mpbAlert({
　　　　　　//mpbAlert此处为自己的工具类，可更换为自己的弹出层
                content:"确定添加"+tag,
                icon:"question",
                ok : function(){
                    //add tags
                    $.mpbAjax(
                            "/admin/job/addJobTypes",    
                            {
                                data:{
                                    _method:"PUT",
                                    tagName:tag
                                    },    
                                async:false,
                                success:function(data){
                                    LoadData();
                                    location.reload();
                                }
                            }    
                        );
                    //end add tags
                     },
                 cancel : function(){
                     $("#tags").removeTag(tag);
                 }
            });
        }
        //remove tags
        function onRemoveTag(tag) {
            $.mpbAlert({
                content:"确定删除"+tag,
                icon:"question",
                ok : function(){
                    //delete tags
                    $.mpbAjax(
                            "/admin/job/removeJobTypes",    
                            {
                                data:{
                                    _method:"DELETE",
                                    tagName:tag
                                    },    
                                async:false,
                                success:function(data){
                                    LoadData();
                                }
                            }    
                        );
                    //delete add tags
                     },
                 cancel : function(){
                     $("#tags").addTag(tag);
                 }
            });
        }
        //change tags
        function onChangeTag(input,tag) {
            alert("Changed a tag: " + tag);
        }
        
        
        //tags controller
        $(function() {
            LoadData();
            $("span .tag").click(function(){
                alert("adsdad");
            });
            $("#tags").tagsInput({
                width:'auto',
                onAddTag:function(tag){
                    onAddTag(tag);
                },
                onRemoveTag:function(tag){
                    onRemoveTag(tag);
                }
                //,
               // interactive:false  //禁止增加标签
            });
    
        });
        function LoadData(){
            $.mpbAjax(
                "/admin/job/getAllJobTypes",    
                {
                    data:{
                        _method:"GET"
                    },    
                    async:false,
                    success:function(data){//拼字符串用于tag的显示
                        var strs="";
                        for(var i in data){
                            strs+=data[i].name+",";
                        }
                        strs=strs.substring(0,strs.length-1);
                        $("#tags").attr("value",strs);
                    }
                }    
            );
        }
        
        //edit tags
        function editTags(value){
            $.mpbAlert({
                content:"确定修改为<input type=\"text\" id=\"editTags\" value=\""+value+"\">",
                icon:"",
                ok : function(){
                    var newTag = $("#editTags").val();
                    $.mpbAjax(
                            "/admin/job/updateJobTypes",    
                            {
                                data:{
                                    _method:"POST",
                                    oldTag:value,
                                    newTag:newTag
                                    },    
                                async:false,
                                success:function(data){
                                    location.reload();
                                }
                            }    
                        );
                     },
                 cancel : function(){
                 }
            });
        }
        function addNewTag(){
            var str = $("#addNewTag").val();
            if($.isNotBlank(str)){
                onAddTag(str);
            }
        }
    </script>

xx.html>body

从后台取出来的值会通过js处理拼成以","分割的字符串赋值到id为tags的input标签的value属性中。

例如：a,b,c

<body>
请输入一个职位类别:<input type="text" id="addNewTag" value=""/><input type="submit" onclick="addNewTag();" value="添加" />
<form>
    <p><label>职位类别管理:</label></p>
    <input id="tags" type="text" class="tags" value="a,b,c" />
</form>
</body>

jquery.mytagsinput.js

// 配置区
$.fn.tagsInput = function(options) { 
var settings = jQuery.extend({
  interactive:true,            //交互式
  defaultText:'添加一个类别',    //提示语
  minChars:0,
  width:'100px',            //编辑区宽度
  height:'300px',            //编辑区高度
  autocomplete: {selectFirst: false },
  'hide':true,
  'delimiter':',',            //分隔符
  'unique':true,            //独一性
  removeWithBackspace:true,
  placeholderColor:'#666666',
  autosize: true,
  comfortZone: 20,
  inputPadding: 6*2
},options);
//html页面的Input 框中的value会通过下面的代码分割
$.fn.tagsInput.importTags = function(obj,val) {            
    $(obj).val('');
    var id = $(obj).attr('id');
    var tags = val.split(delimiter[id]);
    for (i=0; i<tags.length; i++) { 
        $(obj).addTag(tags[i],{focus:false,callback:false});
    }
    if(tags_callbacks[id] && tags_callbacks[id]['onChange'])
    {
        var f = tags_callbacks[id]['onChange'];
        f.call(obj, obj, tags[i]);
    }
};

分割后的字符依次调用addTag方法将值添加到域中

//add tags
    $.fn.addTag = function(value,options) {
            options = jQuery.extend({focus:false,callback:true},options);
            this.each(function() { 
                var id = $(this).attr('id');
                var tagslist = $(this).val().split(delimiter[id]);
                if (tagslist[0] == '') { 
                    tagslist = new Array();
                }
                value = jQuery.trim(value);
        
                if (options.unique) {
                    var skipTag = $(this).tagExist(value);
                    if(skipTag == true) {
                        //Marks fake input as not_valid to let styling it
                        $('#'+id+'_tag').addClass('not_valid');
                    }
                } else {
                    var skipTag = false; 
                }
                
                if (value !='' && skipTag != true) { 
                    $('<span>').addClass('tag').append(
                        $('<span>').text(value).append('&nbsp;&nbsp;'),
                        $('<a>', {
                            href  : '#',
                            title : 'Removing tag',
                            text  : 'x'
                        }).click(function () {
                            return $('#' + id).removeTag(escape(value));
                        })
                    ).click(function(){//add edit funciton
                        
                        editTags(value);//调用外部函数通过弹出层形式进行更改
                    
                    }).insertBefore('#' + id + '_addTag');
                    tagslist.push(value);
                
                    $('#'+id+'_tag').val('');
                    if (options.focus) {
                        $('#'+id+'_tag').focus();
                    } else {        
                        $('#'+id+'_tag').blur();
                    }
                    
                    $.fn.tagsInput.updateTagsField(this,tagslist);
                    
                    if (options.callback && tags_callbacks[id] && tags_callbacks[id]['onAddTag']) {
                        var f = tags_callbacks[id]['onAddTag'];
                        f.call(this, value);
                    }
                    if(tags_callbacks[id] && tags_callbacks[id]['onChange'])
                    {
                        var i = tagslist.length;
                        var f = tags_callbacks[id]['onChange'];
                        f.call(this, $(this), tagslist[i-1]);
                    }                    
                }
        
            });        
            
            return false;
        };
    //end add tags

jQuery Tags Input Plugin（添加/删除标签插件）

首先，引用下面两个文件

<script src="jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />

在你的表单里创建一个包含tags列表的input输入框，你可以在value里设置默认或目前有的tags，并用逗号隔开。

<input name="tags" id="tags" value="foo,bar,baz" />

然后，简单地给任何一个输入标签调用tagsInput()函数，它便会被当作一个tags列表处理

$('#tags').tagsInput();

如果你想使用jQuery.autocomalete（自动完成插件）配合使用，那么在函数里增加一个带autocomplete url的参数。

$('#tags').tagsInput({
  autocomplete_url:'http://myserver.com/api/autocomplete'
});

如果你使用了bassistance.de这个网站上的jQuery.autocomplete插件，还可以增加额外的参数来加强autocomplete插件，就像下面描述的这样。

$('#tags').tagsInput({    
  autocomplete_url:'http://myserver.com/api/autocomplete',
  autocomplete:{selectFirst:true,width:'100px',autoFill:true}
});

PS：需要注意的是，demo里默认用的是jquery ui autocomplete，如果你想要测试jquery.autocomplete，要把头部被注释掉的引用文件去掉注释，并将$('#tags').tagsInput({})中autocomplete_url的地址改为相应的jquery.autocomplete的文件。具体看页面上有说明。

你还可以使用addTag() and removeTag()函数增加和删除掉标签，如以下：

$('#tags').addTag('foo');
$('#tags').removeTag('bar');

你还可以用imporTags()方法导进一组tag列表，需要注意的是这样会将value里设置的默认tag替换掉

$('#tags').importTags('foo,bar,baz');

所以如果importTags()里不带值的话，就是重置input里的标签值（注意引号要保留，可以理解为给它传空值。）

$('#tags').importTags('');

可以使用tagExist()判断一个标签是否存在：

if ($('#tags').tagExist('foo')) { ... }

如果想要在增加或移除掉标签的时候增加额外的功能或触发其它动作，你可以通过onAddTag和onRemoveTag这两个参数里指定回调函。这两个函数都返回了一个标签值作为参数(原文： Both functions should accept a single tag as the parameter.)

$('#tags_1').tagsInput({
    width:'auto',
    onAddTag:function(tag){
        console.log('增加了'+tag)
    },
    onRemoveTag:function(tag){
        console.log('删除了'+tag)
    }
});

如果你想禁止增加标签，或者你想提供其它交互方式增加标签，可以增加一个值为false的interactive参数，这样就禁止了增加标签，而其它的功能和呈现都跟原来一样。

$('#tags_1').tagsInput({
    width:'auto',
    onRemoveTag:function(tag){
        console.log('remover'+'"'+tag+'"')
    },
    interactive:false
});

如果你想要在每次增加/删除一个标签的时候调用一个函数，可以增加onChange的参数，并设置回调函数

默认情况下，如果鼠标位于一个标签后面，按退格键会删除掉那个标签。如果你想禁止这个，设置removeWithBackspace参数为false即可。

参数：

$(selector).tagsInput({
   'autocomplete_url': url_to_autocomplete_api, //自动完成插件的文件地址，demo里有说明
   'autocomplete': { option: value, option: value}, //自动完成插件的参数，demo有说明。（提供个jquery.autocomplete的：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/）
   'height':'100px', //设置高度
   'width':'300px',  //设置宽度
   'interactive':true, //是否允许添加标签，false为阻止
   'defaultText':'add a tag', //默认文字
   'onAddTag':callback_function, //增加标签的回调函数
   'onRemoveTag':callback_function, //删除标签的回调函数
   'onChange' : callback_function, //改变一个标签时的回调函数
   'removeWithBackspace' : true, //是否允许使用退格键删除前面的标签，false为阻止
   'minChars' : 0, //每个标签的小最字符
   'maxChars' : 0 //每个标签的最大字符，如果不设置或者为0，就是无限大
   'placeholderColor' : '#666666' //设置defaultText的颜色
});

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索字符串
标签
jquery tags input、jquery.tagsinput.js、bootstrap tagsinput、tagsinput、ngtagsinput，以便于您获取更多的相关知识。

时间： 2024-10-27 01:52:36

jQuery 标签插件 Tags Input Plugin 使用实例教程的相关文章

jQuery实现宽屏图片轮播实例教程_jquery

本文实例讲述了jQuery实现宽屏图片轮播实例教程.分享给大家供大家参考.具体如下: 运行效果截图如下: 引入jquery库 <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> 构建html整个代码分为三部分: 1.加载部分loadding : 2.图片部分,这里图片只能是4张,有心的朋友再改良下吧: 3.TAB按钮部分,当然这里也只能是4个按钮,也需要改

jQuery Tags Input Plugin（添加/删除标签插件）详解_jquery

看名字应该知道是干嘛用了吧. 一个jquery开发的标签功能加强插件,可以生成或删除标签,还能对输入重复标签进行检查,和JQuery autocomplete插件配合实现自动完成功能. 官网:http://xoxco.com/projects/code/tagsinput/ 截图: (下面是翻译了官网上的用法,英文不是很好,有能力的尽量看官网吧) 首先,引用下面两个文件 <script src="jquery.tagsinput.js"></script> &l

JQuery标签页效果的两个实例讲解（4）_jquery

按照惯例,我们还是先来看一下最终要达到效果图: 和上一个菜单效果类似,当鼠标移动到标签上的时候,下面会显示相应的内容.当然,同样存在滑动门的问题. 前台页面的代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="tab.aspx.cs" Inherits="tab" %> <!DOCTYPE html PUBLIC "-//W3C//

jquery简单插件制作(fn.extend)完整实例_jquery

本文实例讲述了jquery简单插件制作方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=&qu

jQuery TAB插件之TAB选项卡实现实例

在写插件之前对常见的TAB效果做了下总结,大体上也就那几种效果.插件力求简单易用,只要能实现常见的功能即可. 参数说明: •event •触发TAB的事件类型,鼠标悬停:mouseover,鼠标点击:click,默认为mouseover. •timeout •事件延迟,单位为毫秒,默认为0. •auto •自动切换,单位为毫秒,默认为0. •callback •回调函数,触发TAB时执行,函数的参数返回的是this. html代码  代码如下 复制代码 <DIV id=box>  <!-

jquery.qrcode插件生成二维码实例

如何使用 1.首先在页面中加入jquery库文件和qrcode插件.  代码如下 复制代码 <script type="text/javascript" src="jquery.js"></script>  <script type="text/javascript" src="jquery.qrcode.min.js"></script> 2.在页面中需要显示二维码的地方加入以

jQuery ui插件的使用方法代码实例_jquery

复制代码 代码如下:        <script src="Jquery1.7.js" type="text/javascript"></script>     <script src="jquery.validate.js" type="text/javascript"></script>     <script src="messages_cn.js&quo

jQuery标签编辑插件Tagit使用指南_jquery

一.Tagit插件功能 提高网站交互性,增加用户体验.至于其它的功能,还真没有.用一个input text就可以替换了它.但是text没有输入提示功能,而tagit拥有这个功能.官方示例如下图: 将关键词标签化,成为一个整体.方便删除与浏览. 二.Tagit官方地址 http://aehlke.github.io/tag-it/ 官方地址上有使用说明,也有用例.用例的颜色搭配也可以选择.不过选来选去也就是这几种,Tagit插件使用jqueryui,所以jqueryui提供的样式也兼容.jquer

基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍利用jQuery Tags Input 插件显示选择记录. 我在利用jQuery Tags Input 插件之前,一直想找一个合适的J