在 Rails 应用程序的搜索框中自动过滤答案

【问题标题】：Auto filter in searchbox in Rails App在 Rails 应用程序的搜索框中自动过滤
【发布时间】：2017-10-28 12:11:00
【问题描述】：

我有一个 City 模型，这个模型中有 81 个城市，只有 db 字段是名称。

我希望用户能够从导航栏中的下拉列表中选择一个城市，而且用户应该能够通过在开头键入几个字母来快速过滤这些城市。我想做的确切例子是在这个网站：www.dabble.co

我不知道我应该遵循哪种方式来做到这一点。欢迎任何想法。

【问题讨论】：

你需要使用 AJAX 来做类似的事情。选择框的 Rails options_from_collection_for_select 方法会给你第一个字母。对于 81 个城市来说，这可能就足够了。

标签： javascript ruby-on-rails ruby twitter-bootstrap search

【解决方案1】：

如果您使用的是 JQuery，则有 http://selectize.github.io/selectize.js/，其中有国家选择栏的示例。
您希望在控制器中访问您的城市集合，从而呈现您的表单。
例如

def new
  @cities = City.all
end

您可以使用以下助手轻松添加相应的<select> 表单标签：

<%= select_tag("cities",
           options_from_collection_for_select(@cities, 'id', 'name'),
           id: "selectize_cities" # sets the id of the select tag 
)%>

根据您的 Javascript+Rails 设置，在需要 selectize.js 的所有组件后，您可以将其添加到您的 javascript 文件中

$("#selectize_cities").selectize();

如果您想手动实现这一点（不使用 jQuery），一种方法是将数据传递到 html 视图中的 div 标记并使用 Javascript 访问它

<%= div.tag(id: "selfmade", data_cities: @cities.to_json)%> #tag helper
const cities = JSON.parse(document.querySelector("#lol").getAttribute('data_cities')); //plain js

在 youtube 上还有一个 Railscasts“简单搜索表单”应该可以帮助你更进一步！

【讨论】：