我在文本框中放置了一个放大镜的图像,以便用户可以单击它来启动他们的搜索。目前,如果您按下“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 解决方案的情况?如果不是,我该怎么做?
最佳答案
现在,通过 css 的背景属性,表单中的所有内容都是文本框内的图像。这不会接受点击事件。创建一个提交按钮并使用您的“放大镜”属性而不是标准按钮属性来设置它的样式。
将按钮放在文本字段内只是 css 中的相对定位问题。 搜索更多详细信息。
拥有<button type="submit" class="magGlass"></button>
将允许点击它并触发提交事件。
关于jquery - 单击图像以在 Rails 中启动搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21284352/