Question

我正在尝试在我的rails应用程序中使用Tagit Jquery插件（更具体地说，链接页面上的最后一个演示），但似乎无法弄清楚如何在{{{{{ 1}}让它发挥作用。

在普通的HTML中，这有效：

form_for

并生成这个，我用Firebug提取：

<script>
  $(function() {
    $('#demo5').tagit({maxLength: 140, maxTags: 3});
  });
</script>

<div class="box">
  <ul id="demo5"></ul>
</div>

我试图按如下方式实现它：

<div class="box">
  <ul id="demo5" class="tagit">
    <li class="tagit-new">
        <input class="tagit-input ui-autocomplete-input" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
    </li>
        <ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 0px; left: 0px; display: none;"></ul>
  </ul>
</div>

反过来又会产生：

<%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" %>
<%= javascript_include_tag "tagit" %>
<script>
  $(function() {
    $('#demo5').tagit({maxLength: 140, maxTags: 3});
  });
</script>

<div class="box">
  <%= form_for @thingy do |f| %>
    Add some tags
    <%= f.label :tag_list, "Your tags" %>
      <ul id="demo5" class="tagit">
        <li>
          <%= f.text_field :tag_list, :value => @thingy.tags_from(current_user) %>
        </li>
      </ul>
    <p><%= f.submit "Change" %></p>
    <%= f.error_messages %>
  <% end %>
</div>

所有JavaScript文件都正确加载，并且没有样式表冲突。

Answer 1

尝试这样的事情。

重要的是要知道tagit插件提供的输入框不适合您在Rails表单中使用。让它成为该jquery插件的内部隐藏细节。

假设

@thingy.tags_from(current_user)

返回一个数组，你只需要使用该列表作为tagit的种子，当提交表单时，从tagit读取值并存储在你将提交给服务器的隐藏字段中。

<%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" %>
<%= javascript_include_tag "tagit" %>
<script>
  $(function() {
    $('#demo5').tagit({maxLength: 140, maxTags: 3, initialTags: $("#mytaglist").val()});
    $("form#myform").submit(function(e){
      $("#mytaglist").val($('#demo5').tagit("tags").map(function(e){return e.value;}).get().join());
      return true; // to continue form submission
    });
  });
</script>

<div class="box">
  Add Some Tags
  <ul id="demo5" class="tagit"></ul>
  <%= form_for @thingy, :id => "myform" do |f| %>
    <%= f.hidden_field :tag_list, :value => @thingy.tags_from(current_user).join(), :id => "mytaglist" %>
    <p><%= f.submit "Change" %></p>
    <%= f.error_messages %>
  <% end %>
</div>

Answer 2

那里有一些糟糕的，糟糕的HTML。

你不能在UL内加P（你会注意到浏览器通过从段落元素中抛出ul来纠正这一点）
LI内没有UL个元素。列表项（LI s）是唯一可以直接位于列表（UL或OL）元素内的元素。因此，要将输入放入列表元素，它们需要位于该列表中的列表项内。

但是，大多数情况下，TagIt似乎非常想构建HTML本身，所以我不知道你是否可以构建/复制所有生成的HTML，然后使用TagIt - 它并不期望它全部存在。 / p>

试试这个（它基本上将您现有的标记放入data-属性，并在列表中使用tagit时提取它们：

<%= form_for @thingy do |f| %>

  <%= f.label :tag_list, "Your tags" %>
  <ul id="demo5" name="thingy[tag_list]" data-tags="<%= @thingy.tags_from(current_user) %>"></ul>

  <p><%= f.submit "Change" %></p>
  <%= f.error_messages %>

<% end %>

<script>
  $(function() {
    var tags = $("#demo5").data("tags").split(/\s+/)
    $('#demo5').tagit({
      maxLength: 140,
      maxTags: 3,
      initialTags: tags,
      select: true
    });
  });
</script>

您可能还/想要将“添加一些标签”文本放在一些语义上合适的元素中

如何在form_for标签中使用<ul>？</ul>

2 个答案: