按回车搜索

Question

现在我有一个搜索字段，旁边是一个提交搜索按钮。但是想要删除按钮，以便用户只需按回车键即可。我需要更改什么？

 <%= form_tag search_path, method: :get do %>
  <div class="row">
    <div class="col-md-5">
      <%= text_field_tag :search, params[:search], placeholder: "z.B. New York", class: "suchfeld", id: "autolocation" %>
    </div>

    <div class="row">
      <div class="col-md-2">
        <%= submit_tag "Search", class: "btn btn-normal btn-block" %>
      </div>
    </div>

  </div>
  <br/><br/>


<% end %>

Answer 1

您可以使用 css 简单地隐藏按钮。 {display: none}。但是不要删除按钮。（如果您使用的是 boostrap，请尝试将 d-none class 添加到提交按钮。）这将使用回车键提交您的表单。

Answer 2

可以使用 jquery 或 javascript

完成

1 -> 为表单和输入字段提供唯一 ID，该 ID 将在点击回车时提交

 <%= form_tag(search_path, method: :get, id: 'search_form') do %>
  <div class="row">
    <div class="col-md-5">
      <%= text_field_tag :search, params[:search], placeholder: "z.B. New York", class: "suchfeld", id: "autolocation" %>
    </div>    
  </div>
  <br/><br/>
<% end %>

2 -> 使用 jQuery 检查是否按下了输入按钮，然后提交此表单

<script>
$(document).ready(function() {
  $('#autolocation').keydown(function(event) {
    // enter has keyCode = 13
    if (event.keyCode == 13) {
      $('#search_form')submit(); // submit the form
      return false;
    }
  });
});
</script>

按回车搜索

Searching by hitting enter

html

javascript

ruby

ruby-on-rails

ruby-on-rails-3