按回车键搜索

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

可以使用 jquery 或 javascript 完成

1 -> 为表单和输入字段提供一个唯一的 ID，将在点击 Enter 时提交

 <%= 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>

Answer 2

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