ruby-on-rails - Simple_form Bootstrap 样式内联表单无法正常工作

Question

我有一个有效的 twitter bootstrap 安装和简单的表单生成以下内容:

<form accept-charset="UTF-8" action="/find_map" class="simple_form form-inline" id="new_location" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="p5CSoidWaoGMfHY0/3ElWi0XJVg6Cqi9GqWRNlJLBQg=" /></div>
        <div class="control-group string required"><div class="controls"><input class="string required" id="location_address" name="location[address]" placeholder="Address" size="50" type="text" /></div></div><input class="btn" name="commit" type="submit" value="Find!" />
</form>

不知何故，“寻找!”按钮不会与搜索框出现在同一行。有任何想法吗？

谢谢!

更新:

抱歉，我应该提到所有标记都是由 simple_form 基于以下内容生成的:

<%= simple_form_for @location, :url => find_map_path, :html => { :class => 'form-inline' } do |f| %>

        <%= f.input :address, :label => false, :placeholder => "Address" %>
        <%= f.submit "Find!", :class => 'btn' %>

<% end %>

所以，真的，生成的标记似乎存在问题，即使我已经运行了 simple_form 的 Bootstrap 安装等。



上图显示了一个直接的 html 表单

<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <button type="submit" class="btn">Sign in</button>
</form>

...在 simple_form 生成的那个之上。

Answer 1

我认为这里有几个问题。一个是格式化，simple_form 加<div> 的方式围绕输入字段。 @Ron 建议使用 input_field使用 simple_form 2.0.1 为我工作。我的示例是在联系人表中搜索姓名。以下使文本框和按钮并排显示:

<%= simple_form_for :contact, :method => 'get', 
    :html => { :class => 'form-search' } do |f| %>
  <%= f.input_field :search, :placeholder => "Name", 
      :class => "input-medium search-query" %>
  <%= f.submit "Find!", :class => "btn" %>
<% end %>

另一个问题是 simple_form 通常假设您想​​要使用模型和字段名称。上面的例子使用了 :symbol而不是 @model作为建议的第一个参数 here .但这仍然会生成一个名为 contact[search] 的输入字段所以你必须告诉你的 Controller 如何处理它。

我认为在这种情况下，不使用 simple_form 而是使用类似于 Ryan Bates 的 Railscast #240, Search, Sort, Paginate with AJAX 开头的表单可能会更简单。 :

<%= form_tag contacts_path, :method => 'get', :class => "form-search" do %>
  <%= text_field_tag :search, nil, :placeholder => "Name", 
      :class => "input-medium search-query" %>
  <%= submit_tag "Find!", :name => nil, :class => "btn" %>
<% end %>

现在该字段被命名为“search”，我可以在 Controller 的 #index 方法中使用它，如下所示:

@contacts = @contacts.search(params[:search])

假设我的模型中有这个:

def self.search(search)
  if search
    where('lower(name) LIKE ?', "%#{search.downcase}%")
  else
    scoped
  end
end