jquery - 单击图像以在 Rails 中启动搜索

Question

我在文本框中放置了一个放大镜的图像，以便用户可以单击它来启动他们的搜索。目前，如果您按下“Enter”，搜索功能就会执行，但还需要一个点击事件。

这是我的 HTML 和 CSS:

<form accept-charset="UTF-8" action="/blog" class="searchPosts" method="get">
  <input id="search" name="search" placeholder="Search Here" type="text" />      
</form>


.searchPosts {
  background:url("/assets/bg_dots_grey.png") repeat;
}

#search {
 background:url('/assets/search.png') no-repeat right;
 padding-right:0px;
}   

生成表单的 Ruby:

<%= form_tag blog_path, :method => 'get', :class => 'searchPosts'  do %>
  <%= text_field_tag :search, params[:search], :placeholder => 'Search Here' %>
<% end %>   

请注意，这里没有 submit_tag，因为我不希望用户点击按钮来执行请求。

我是否需要重新添加 submit_tag 并使用 CSS 设置样式以适合输入字段？或者这是 jQuery 解决方案的情况？如果不是，我该怎么做？

Answer 1

现在，通过 css 的背景属性，表单中的所有内容都是文本框内的图像。这不会接受点击事件。创建一个提交按钮并使用您的“放大镜”属性而不是标准按钮属性来设置它的样式。

将按钮放在文本字段内只是 css 中的相对定位问题。 搜索更多详细信息。

拥有<button type="submit" class="magGlass"></button>将允许点击它并触发提交事件。