如何使用标签管理器？答案

【问题标题】：how to use tags manager?如何使用标签管理器？
【发布时间】：2013-03-02 05:59:58
【问题描述】：

谁能告诉我这个标签管理器的简单实现，让它在一个简单的 html 文件上工作？

我确实尝试自己实现它，如下所示，但我无法让它工作。

<html>
<head>
     <title>tags example</title>
     <script type="text/javascript" src="assets/js/bootstrap-tagmanager.js"></script>
     <script type="text/javascript" src="assets/css/bootstrap-tagmanager.css"></script>
     <script src="assets/js/jquery-1.9.0.min.js" type="text/javascript"></script>
 </head>
 <body>

 <input type="text" name="tags" placeholder="Tags" class="tagsManager"/>

 <script src="assets/js/angular/angular.min.js"></script>
 <script src="assets/js/angular/angular-resource.min.js"></script>
 <script src="assets/js/app.js"></script>
 <script src="assets/js/controllers.js"></script>
 <script src="assets/js/jquery-ui-1.10.0.custom.min.js" type="text/javascript">                    </script>
 <script src="assets/js/bootstrap.min.js" type="text/javascript"></script>

 <script type="text/javascript">
     jQuery(".tagManager").tagsManager({
         prefilled: ["Pisa", "Rome"],
         CapitalizeFirstLetter: true,
         preventSubmitOnEnter: true,
         typeahead: true,
         typeaheadAjaxSource: null,
         typeaheadSource: ["Pisa", "Rome", "Milan", "Florence", "New York", "Paris",      "Berlin", "London", "Madrid"],
         delimeters: [44, 188, 13],
         backspace: [8],
         blinkBGColor_1: '#FFFF9C',
         blinkBGColor_2: '#CDE69C',
         hiddenTagListName: 'hiddenTagListA'
     });
 </script>

 </body>
 </html>

【问题讨论】：

你的 jQuery 选择器应该是 $('.tagsManager') 而不是 $('.tagManager')。
嗨，我已经尝试更改该设置，但仍然无法正常工作。你能通过附上你的代码来告诉我你是如何让它工作的吗？

标签： jquery tags

【解决方案1】：

检查这个FIDDLE，你也没有添加隐藏字段hiddenTagListA

从此更改您的代码

 <script type="text/javascript" src="assets/js/bootstrap-tagmanager.js"></script>
 <script type="text/javascript" src="assets/css/bootstrap-tagmanager.css"></script>
 <script src="assets/js/jquery-1.9.0.min.js" type="text/javascript"></script>

 <script type="text/javascript">
 jQuery(".tagManager").tagsManager({
     prefilled: ["Pisa", "Rome"],
     CapitalizeFirstLetter: true,
     preventSubmitOnEnter: true,
     typeahead: true,
     typeaheadAjaxSource: null,
     typeaheadSource: ["Pisa", "Rome", "Milan", "Florence", "New York", "Paris",      "Berlin", "London", "Madrid"],
     delimeters: [44, 188, 13],
     backspace: [8],
     blinkBGColor_1: '#FFFF9C',
     blinkBGColor_2: '#CDE69C',
     hiddenTagListName: 'hiddenTagListA'
 });
</script>

到这里

 <link href="assets/css/bootstrap-tagmanager.css" rel="stylesheet" type="text/css" />
 <script src="assets/js/jquery-1.9.0.min.js" type="text/javascript"></script>
 <script type="text/javascript" src="assets/js/bootstrap-tagmanager.js"></script>

 <script type="text/javascript">
  $(function () {
    $(".tagsManager").tagsManager({
     prefilled: ["Pisa", "Rome"],
     CapitalizeFirstLetter: true,
     preventSubmitOnEnter: true,
     typeahead: true,
     typeaheadAjaxSource: null,
     typeaheadSource: ["Pisa", "Rome", "Milan", "Florence", "New York", "Paris",      "Berlin", "London", "Madrid"],
     delimeters: [44, 188, 13],
     backspace: [8],
     blinkBGColor_1: '#FFFF9C',
     blinkBGColor_2: '#CDE69C',
     hiddenTagListName: 'hiddenTagListA'
  });
});
 </script>

【讨论】：

天啊。有效！非常感谢！现在我要玩弄它。谢谢
是否可以给标签一个附加位置？因为它们似乎只是直接添加到输入框的左侧，是否可以将它们附加到另一个文本框，该文本框将充当所有创建的标签的容器？？？