Rails 应用中文本框的“建议”功能-解网

问：

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

感谢您的任何建议！

JavaScript Ruby-on-Rails AJAX Autosuggest

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

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

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

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

1赞 Yardboy 10/12/2008 #3

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

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

1赞 JasonOng 10/14/2008 #4

您也可以尝试这种稍微手动的方法

# 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>

8赞 Olly 10/14/2008 #5

Rails 使用该方法使文本字段的“建议”式自动补全变得非常容易。text_field_with_auto_complete

在 Rails 1.x 中，这个方法被内置在 ActionView：：Helpers：：JavaScriptMacrosHelper 中，但在 Rails 2.x 中，它被移动到一个单独的插件中。

假设您有一个名为的模型，该模型具有一个名为的文本字段。在您看来，您通常会使用（或），只需改用：Posttitletext_field_tagf.text_fieldtext_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

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

上一个：AJAX 不请求 url 页面以获得成功响应

下一个：使用 AJAX 加载程序的最佳方法？

Rails 应用中文本框的“建议”功能

"suggest" feature for textboxes in a rails app

评论