将标签附加到文本框答案

【问题标题】：Append tags to textbox将标签附加到文本框
【发布时间】：2015-03-16 16:43:25
【问题描述】：

我正在使用Tag Manager 库。

我已经让它在最简单的层面上工作了 -

<head runat="server">

    <link rel="stylesheet" type="text/css" href="CSS/tagmanager.css" />

    <script type="text/javascript" src="Scripts/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="Scripts/tagmanager.js"></script>

</head>
<body>
    <form id="form1" runat="server">
    <div>

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

    </div>

          <script>
              $(".tm-input").tagsManager();
    </script>

    </form>
</body>
</html>

是否可以定义标签放置在页面上的位置？更具体地说，我打算将标签附加到另一个作为容器的文本框。我在如何指定位置的文档中找不到任何地方。

这是一个有效的example JSFIDDLE

【问题讨论】：

标签： jquery html tags

【解决方案1】：

如果您看到docs [scroll to Tagmanager Configuration]，则已经有一个可用的选项

tagsContainer：可选的 jQuery 选择器，用于包含标签。默认值：标签紧接在标签输入之前。

代码：

$(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',
         tagsContainer: '#testcontainer'
     });
});

<input type="text" name="tags" placeholder="Tags" class="tagsManager"
/>
<input type="hidden" value="Pisa,Rome" name="hiddenTagList">
<div id="testcontainer"><h2>Tags here:</h2></div>

Fiddle Demo

【讨论】：

【解决方案2】：

我不完全确定你展示的函数会产生什么样的输出，但难道不能用 jQuery 将产生的代码移动到你想要的任何地方吗？像这样：

<script>
//First execute your function
$(".tm-input").tagsManager();
//Then move it somewhere else
$("#form1").appendTo(".some-other-container");
</script>

其中 '.some-other-container' 是 class="some-other-container" 的 div

你也可以使用 insertAfter() 将代码移动到某个 div 之后。

【讨论】：