jQuery Tags Input Plugin

关键字：tag 标签 输入标签化

来自：http://xoxco.com/projects/code/tagsinput/

这是一个JQuery插件，输入字符，按回车，变标签。

基本原理：

标签框是一个大DIV叫tags_3_tagsinput，DIV里有显示标签的span和输入用的input。当你在input里面输入一些字符，按回车

就变成一个span显示标签，插在input前面。

强烈建议你，花上两个小时，下载它的DEMO，用firebug来调试，观察其对HTML DOM的影响。

功能：

除了生成标签外，还能对输入重复标签进行检查，和JQuery autocomplete插件配合实现自动完成功能。

它的可选项如下：

$(selector).tagsInput({
   'autocomplete_url': url_to_autocomplete_api,//JQueryUI的自动完成插件，的目标地址
   'autocomplete': { option: value, option: value},//这个去官网看吧
   'height':'100px',//大DIV的高度
   'width':'300px',//大DIV的宽度
   'interactive':true,
   'defaultText':'add a tag',//默认输入框的文本提示
   'onAddTag':callback_function,//添加标签时的事件函数
   'onRemoveTag':callback_function,//移除标签时的事件函数
   'onChange' : callback_function,//不大清楚
   'removeWithBackspace' : true,//自己看
   'minChars' : 0,
   'maxChars' : 0 //if not provided there is no limit,
   'placeholderColor' : '#666666'//自己看
});

整个DEMO的代码：

    <link rel="stylesheet" type="text/css" href="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.js"></script>
    <!-- To test using the original jQuery.autocomplete, uncomment the following -->
    <!--
    <script type='text/javascript' src='http://xoxco.com/x/tagsinput/jquery-autocomplete/jquery.autocomplete.min.js'></script>
    <link rel="stylesheet" type="text/css" href="http://xoxco.com/x/tagsinput/jquery-autocomplete/jquery.autocomplete.css" />
    -->
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js'></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/start/jquery-ui.css" />
    
    
    <script type="text/javascript">
        
        function onAddTag(tag) {
            alert("Added a tag: " + tag);
        }
        function onRemoveTag(tag) {
            alert("Removed a tag: " + tag);
        }
        
        function onChangeTag(input,tag) {
            alert("Changed a tag: " + tag);
        }
        
        $(function() {

            $('#tags_1').tagsInput({width:'auto'});
            $('#tags_2').tagsInput({
                width: 'auto',
                onChange: function(elem, elem_tags)
                {
                    var languages = ['php','ruby','javascript'];
                    $('.tag', elem_tags).each(function()
                    {
                        if($(this).text().search(new RegExp('\\b(' + languages.join('|') + ')\\b')) >= 0)
                            $(this).css('background-color', 'yellow');
                    });
                }
            });
            $('#tags_3').tagsInput({
                width: 'auto',

                //autocomplete_url:'test/fake_plaintext_endpoint.html' //jquery.autocomplete (not jquery ui)
                autocomplete_url:'test/fake_json_endpoint.html' // jquery ui autocomplete requires a json endpoint
            });
            

// Uncomment this line to see the callback functions in action
//            $('input.tags').tagsInput({onAddTag:onAddTag,onRemoveTag:onRemoveTag,onChange: onChangeTag});        

// Uncomment this line to see an input with no interface for adding new tags.
//            $('input.tags').tagsInput({interactive:false});
        });
    
    </script>
        <form>
            <p><label>Defaults:</label>
            <input id="tags_1" type="text" class="tags" value="foo,bar,baz,roffle" /></p>
            
            <p><label>Technologies: (Programming languages in yellow)</label>
            <input id="tags_2" type="text" class="tags" value="php,ios,javascript,ruby,android,kindle" /></p>
            
            <p><label>Autocomplete:</label>
            <input id='tags_3' type='text' class='tags'></p>
            
        </form>

 该知道引用哪些文件了吧。就是JQuery，JQueryUI和其CSS，它自己的JS文件和CSS。