Question

我正在寻找一种最简单的方法来实现Rails应用程序中文本输入字段的“建议”功能。我们的想法是完成存储在数据库列中的名称，为用户提供可用匹配项的下拉菜单。

感谢您的任何建议！

Answer 1

使用text_field_with_auto_complete方法，Rails使文本字段的'建议'式自动完成非常简单。

在Rails 1.x中，此方法内置于ActionView::Helpers::JavaScriptMacrosHelper，但对于Rails 2.x，它已移至a separate plugin。

假设您有一个名为Post的模型，其中有一个名为title的文本字段。在您的视图中，您通常会使用text_field_tag（或f.text_field），只需使用text_field_with_auto_complete：

<%= text_field_with_auto_complete :post, :title %>

此外，在PostsController中，您必须做出相应的声明：

class PostsController < ApplicationController
  auto_complete_for :post, :title
end

幕后操作是动态添加一个名为auto_complete_for_[object]_[method]的动作到控制器。在上面的示例中，此操作将被称为auto_complete_for_post_title。

值得指出的是，此自动生成的操作使用的find调用将在所有模型对象中起作用，例如Post.find(:all, ...)。如果这不是您想要的行为（例如，如果要根据登录用户将搜索限制为Post的特定子集），则必须定义自己的auto_complete_for_[object]_[method]操作在你的控制器中。

Answer 2

Ruby on Rails有Prototype framework可用。此框架由Script.aculo.us使用，它提供了autocompleter control，可以提供您正在寻找的功能。

Answer 3

编辑：我会在这里留下这个答案作为一种理论参考点，但听起来autocompleter answer可能对你更有用：）

免责声明：虽然我在谷歌工作（显然在各种用户界面中都有“建议”元素），但我没有看过这个领域的任何代码，甚至没有与任何人谈过客户端问题。

服务器端语言可能与此无关。重要的是客户端所需的AJAX。

我建议你有一个大约1秒的计时器（试验找到最佳位置），每当用户输入击键进入文本框时重置，并在用户导航离开文本框时取消。如果计时器触发，则使其触发AJAX请求。 AJAX请求将包含用户到目前为止输入的内容。 AJAX响应应该是建议列表和原始请求文本。

如果，当AJAX响应返回时，文本框中的文本仍然与响应中的字段相同（即用户之后没有键入），如果文本框仍然具有焦点，则提供下拉列表。（必须有数百个关于HTML组合框的示例页面来完成这方面的工作。）

所有服务器需要做的是通过执行搜索并适当地格式化响应来响应AJAX请求 - 这比客户端要容易得多！

希望有所帮助 - 抱歉没有任何示例代码，但我怀疑它非常复杂，我不是真正的JavaScript开发人员。

Answer 4

与Rails中的大多数事情一样，有几种方法可以做到这一点。 Rails曾经包含一组内置的自动完成助手，但该功能现已被移除到auto_complete插件中。这可能是您获得所需实现的最简单方法 - 控制器中的简单命令，视图中的一些简单内容 - ta-dah。要使用此解决方案，您只需将插件安装到您的应用程序中 - 请参阅this page，它告诉您安装和开始安装所需的全部信息。

正如另一个答案中所指出的，走这条路线将使用与Rails捆绑在一起的原型和scriptaculous AJAX框架。还有其他AJAX框架，尤其是JQuery，它们也可以帮助您完成此功能，但是您可以使用它们进行更多的学习，而不仅仅是使用插件。

Answer 5

你也可以尝试这种稍微更加手动的方法

# your_view.rhtml

<%= text_field 'contact', 'name', :id => 'suggest' %>
<div id='dropdown' style='display:none; z-index: 100; background: #FFFFFF'></div>

<script>
  new Ajax.Autocompleter('suggest', 'dropdown', "<%= url_for :controller => 'contacts', :action => 'suggest_name' %>") 
</script>

# contacts_controller.rb

def suggest_name
  query_string = params[:contact][:name]
  @contacts = Contact.find.all :conditions => ['name ilike ?', "%#{query_string}%"]
  render :partial => 'name_suggestions'
end

# contacts/_name_suggestions.rhtml

<ul>
<% for contact in @contacts %>
  <li><%= contact.name %></li>
<% end %>
</ul>

rails应用程序中文本框的“建议”功能

5 个答案: