提交Ajax表单后如何清空并刷新Tags Manager所有标签？

先修正代码里的语法错误 #

你的原始代码有几处小问题，会导致插件无法正常工作：

• jQuery必须在bootstrap-tagmanager.js之前加载，因为插件依赖jQuery
• 选择器缺少闭合引号：$('.tagsManager) 应该改为 $('.tagsManager')
• 初始化方法名拼写错误：tagsmanger() 应该改为 tagsManager()

提交Ajax后清空标签的解决方案 #

Bootstrap TagManager内置了清空标签的方法，你只需要在Ajax请求成功的回调函数中，调用tagsManager('empty')即可移除所有标签。

完整示例代码 #

<html>
<head>
    <title>tags example</title>
    <!-- 先加载jQuery -->
    <script src="assets/js/jquery-1.9.0.min.js" type="text/javascript"></script>
    <!-- 再加载tagmanager的JS和CSS -->
    <script type="text/javascript" src="assets/js/bootstrap-tagmanager.js"></script>
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap-tagmanager.css">
</head>
<body>
    <input type="text" name="tags" placeholder="Tags" class="tagsManager"/>
    <button id="submitForm">提交表单</button>

    <script type="text/javascript">     
        // 初始化标签管理器并保存实例
        var tagManager = $('.tagsManager').tagsManager();  

        // 绑定提交按钮点击事件
        $('#submitForm').on('click', function() {
            // 模拟Ajax提交
            $.ajax({
                url: '你的提交接口地址',
                type: 'POST',
                data: { tags: tagManager.tagsManager('getTags') }, // 获取当前所有标签内容
                success: function(response) {
                    // 提交成功后清空所有标签
                    tagManager.tagsManager('empty');
                },
                error: function() {
                    // 处理提交失败情况
                    alert('提交失败，请重试');
                }
            });
        });
    </script>
</body>
</html>

关键说明 #

• 初始化时保存标签管理器实例，方便后续调用内置方法
• 使用tagsManager('getTags')可以获取当前所有标签的内容，用于表单提交
• 在Ajax的success回调中调用tagsManager('empty')，即可一次性移除所有已添加的标签

内容的提问来源于stack exchange，提问作者The Eagle