jquery.tagsinput.js jquery 多标签输入框插件-BFW插件库

jquery.tagsinput.js jquery 多标签输入框插件

第一步引入bfwone 加载依赖项jquery和jquery.ui

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17|jquery-ui.min&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.tagsinput", "jquery-ui.min|jquery.tagsinput"], 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});
            });
        });
        function onAddTag(tag) {
            alert("添加标签: " + tag);
        }
        function onRemoveTag(tag) {
            alert("Removed a tag: " + tag);
        }

        function onChangeTag(input, tag) {
            alert("Changed a tag: " + tag);
        }

    </script>
</head>
<body>

    <form>
        <p>
            <label>默认:</label>
            <input id="tags_1" type="text" class="tags" value="foo,bar,baz,roffle" />
        </p>
        <p>
            <label>技术</label>
            <input id="tags_2" type="text" class="tags" value="php,ios,javascript,ruby,android,kindle" />
        </p>
        <p>
            <label>输入文本按回车自动添加tag:</label>
            <input id='tags_3' type='text' class='tags'>
        </p>
    </form>
</body>
</html>