单击image启动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>，就可以点击它，会触发提交事件。