实现 OnClick 类型的功能并格式化 Rails 部分视图

Question

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

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

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

如果您无法更好地理解我所拥有的内容 实现了wrt自动完成功能，请参考 在 Rails 中实现多个字段的自动完成 。

您还可以通过参考 http://imagepaste 更好地理解我所实现的内容.nu​​llnetwork.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.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'，：对齐=> '左'%>

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

<%end%>

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

我需要的是实现点击 Rails 它将 仅选择群组标题。我尝试实现组标题并 具有单独的

标签的组大小，然后我可以将鼠标悬停并 仅选择标题并将其填充到文本字段中。

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

如果我能弄清楚如何减少每个之间的格式空间 三个title.jpg，标题和组大小。这个选项可以是 被认为是替代修复，但可能不是最佳修复。

我不太确定我怎样才能像我一样（建议的修复） 一个新手在 RoR 中遇到了很多事情。我不太确定什么命令 我可以利用 RoR 来帮助我简化/解决我的任务。能 请你帮我解决这个问题。

我也将不胜感激任何有关更有效修复的建议 这个场景。

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

谢谢..

Answer 1

Script.aculo.us Ajax.Autocompleter 有一个针对此类事情的简单功能。您想要从自动填充结果中排除的任何元素只需要包装在 span.informal 标记中。因此，您的结果将如下所示：

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

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

Answer 2

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

下面的代码对我来说很神奇......

<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 概念..）。但我很高兴最终这根据要求起作用了。

再次感谢..沃尔特..