将标签附加到文本框

Question

我正在使用 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

Answer 1

我不完全确定你展示的函数会产生什么样的输出，但是否可以将生成的带有 jQuery 的代码移动到你想要的任何地方？像这样：

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

其中“.some-other-container”是 div 且 class="some-other-container"

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

Answer 2

如果您看到 docs [滚动到 Tagmanager Configuration]

，则已经有可用的选项

tagsContainer: Optional jQuery selector for the element to contain the tags. Default: tags appear immediately before the tag input.

代码：

$(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

将标签附加到文本框

Append tags to textbox

html

tags

jquery