0

我正在尝试使用 Rails Helpers 实现类似于 Javascript 的 onclick 方法的功能。

我在 Rails 2.0.2 和 Ruby 1.8.7 中为多个字段实现了自动完成功能。此配置在 Ubuntu 10.04 上运行，是的，我知道.. 当我们拥有 Rails 3.x 时，您可能会觉得为什么是 Rails 2.x，这是因为项目特定的目的。我对此没有太多选择..:)。

我能够根据给定的“标题”作为用户在自动完成功能的文本字段中输入的基本搜索查询，成功检索组特定的个人资料图片、组标题和属于组的成员总数正在执行。让自动完成功能适用于上述场景本身就是一个挑战。

如果您无法更好地理解我已经实现了自动完成功能，请参阅 在 Rails 中实现多个字段的自动完成功能 。

您还可以通过参考http://imagepaste.nullnetwork.net/viewimage.php?id=2048 ， http://imagepaste.nullnetwork.net/viewimage.php?id=2050更好地了解我的实现 和http://imagepaste.nullnetwork.net/viewimage.php?id=2049。

请注意，组特定个人资料图片的名称与组标题的名称相同，但图片也会附加 .jpg。

我正在使用自定义的自动完成方法、自动完成插件以及使用 Rails 部分。自定义的自动完成方法允许我修改基本功能以满足我的要求。

来到我的问题，现在说如果用户根据我实现的自动完成功能在文本字段中输入“I”，结果（找到多个匹配项（即，如果存在多个以用户界面上填充的特定搜索查询上的“I”）将具有以下所有内容：-

  • 以与标题相同的名称开头的组特定个人资料图片，在本例中为“I%”.jpg
  • 组标题名称。
  • 属于一个组的成员总数

假设我有 India 和 Independence 作为我的组名，我将在我的自动完成文本字段中获得以下结果。

India.jpg(image will be displayed)     India(Group title name displayed)               3(dummy value here)

同样地

Independence.jpg                     Independence
4

所有这些都将出现在一个文本字段中。请注意括号中的注释不是通过自动完成返回的结果的一部分。

如果您无法想象 UI 的外观，请在创建帐户后在 www.diasp.org 注册并使用其搜索功能搜索任何随机用户。

请注意图片、标题名称和群组成员总数之间的间距太大。我将在随后的评论中再次提及这一点。

呈现所有这些的部分代码是：-

<ul>
  <% for inv_group in @investor_group2 %>
  <%=image_tag "investor_groups/#{inv_group.title}.jpg" , :width =>

'40', :height => '22', :align => 'left' %>

  • <%=h inv_group.title %>(<%=h inv_group.activated_members.size %>)
    • <%结束%>

    现在，如果用户将鼠标悬停在印度，然后单击它，则文本字段将填充**India(3)**.

    我需要实现的是在 Rails 中单击它只会 选择 Group title。我尝试使用单独的<li>标签来实现组标题和组大小，然后我能够将鼠标悬停并仅选择标题并将其填充到文本字段中。

    这种方法的问题是它完全破坏了图像、标题和组大小之间的格式和间距/间隙。这需要格式化以获得更好的 UI 外观和感觉。

    如果我能弄清楚如何减少三个title.jpg，title和group size之间的格式空间。此选项可被视为替代修复，但可能不是最佳修复。

    我不太确定如何进行相同的操作（建议的修复），因为我是 RoR 中许多事情的新手。我不太确定我可以使用哪些 RoR 命令来帮助我简化/解决我的任务。你能帮我解决这个问题吗？

    对于更有效地解决这种情况的任何建议，我也将不胜感激。

    后来，我在某种程度上能够弄清楚，通过使用 javascript 的 onclick 事件，我可以解决我的问题。我不太确定使用 Rails Helpers 的等效语法。我参考了 http://api.rubyonrails.org/classes/ActionView/Helpers/JavaScriptHelper.html#method-i-javascript_tag 来掌握javascript_tag 如何用于我的目的，但如果这是出路，我真的不知道如何修改基本语法以满足我的要求。如果可行，请帮助我。

    谢谢..

    4

    2 回答 2

    1

    Script.aculo.us Ajax.Autocompleter 对这类事情有一个简单的功能。您想要从自动填充结果中排除的任何元素只需要包含在 span.informal 标记中。所以你的结果看起来像这样：

    <li>
    <span class="informal">[img tag]</span>
    India
    <span class="informal">whatever else</span>
</li>

    在自动完成程序的提示列表中单击此结果时，文本字段中只会输入单词 India。

    于 2011-04-12T13:52:17.190 回答
    0

    添加到来自http://www.ruby-forum.com/topic/1475454?reply_to=992312的 Walter 的建议。

    下面的代码为我做了魔法......

    <ul>
  <%= javascript_include_tag :defaults, :cache => true %>
  <%=stylesheet_link_tag "groups"%>
  <% for inv_group in @investor_group2 %>

   <li><div class="autocomp_field_width_modify" ><%=image_tag "investor_groups/#{inv_group.title}.jpg" , :width => '40', :height => '22', :align => 'left' %><%=h inv_group.title%><span class="informal">(<%=h inv_group.activated_members.size %>)</span></div></li>

  <%end%>
</ul>

    在我的 groups.css 中，我添加了以下内容：-

    .autocomp_field_width_modify
{
      text-align: justify;
      text-indent: 3%;
}

    感谢您的建议 Walter，我知道我可能没有完全遵循 HTML 标记标准（我还有很多基础可以加强我在 HTML 中的概念......）。但我很高兴最终这可以根据要求工作。

    再次感谢..沃尔特..

    于 2011-04-13T09:32:15.560 回答