Question

我有一个城市模型，这个模型中有81个城市，只有数据库字段是名称。

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

我不知道应该采取哪种方式来执行此操作。任何想法都很好。

Answer 1

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

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＆＃34;简单的搜索表单＆＃34;这应该会帮助你进一步前进！

在Rails App中的搜索框中自动过滤

1 个答案: