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({
                '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,
      '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.mytagsinput.js

jquery.tagsinput.css