over 1 year ago

增加search搜索框

在app/models/job.rb文件最后一行end前添加以下内容:

scope :recent, -> { order('created_at DESC') }
  
has_many :resumes
 +  def self.search(search)
 +     where("title LIKE ?", "%#{search}%").or(where("description LIKE ?", "%#{search}%"))
 +  end
  end

在app/views/jobs/index.html.erb文件最开始的位置,添加

+<%= form_tag jobs_path, :method => "get" do %>
 +
 +      <div class="searchform">
 +         <%= text_field_tag :search, params[:search], placeholder: "搜索职位", class: "searchbox"%>
 +         <span>
 +             <%= submit_tag "搜索", :title => nil, :description => nil, class: "mike" %>
 +             <!-- <input type="submit" value="点 击" class="mike"> -->
 +          </span>
 +      </div>
 +   <% end %>
 +
  <div class="dropdown clearfix pull-right">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

修改app/controllers/jobs_controller.rb文件

   def index
      @jobs = case params[:order]
              when 'by_lower_bound'
               Job.published.order("wage_lower_bound DESC")
              when 'by_upper_bound'
               Job.published.order("wage_upper_bound DESC")
              else
 -            Job.published.recent
 +            Job.published.recent.search(params[:search])
            end
          end

美化搜索框的显示效果

修改app/assets/stylesheets/jobs.scss文件,增加以下内容

 +.searchform{
 +  position: relative;
 +  height: 100%;
 +  width: 540px;
 +  min-height: 100px;
 +  margin: 80px auto 0 auto;
 +  text-align: left;
 +}
 +.searchbox{
 +  float: left;
 +  width: 421px;
 +  height: 38px;
 +  padding: 9px 7px;
 +  font: 16px arial;
 +  border: 1px solid #b8b8b8;
 +
 +}
 +.mike {
 +    float: auto;
 +    color: #fff;
 +    font-weight: bold;
 +    cursor: pointer;
 +    background-color: #60af00;
 +    width: 86px;
 +    height: 38px;
 +    border: 1px solid #5d9b4d;
 +    font-size: 14px;
 +    font-family: simsun;
 +}

如果网站已经做了分页功能,则需要进行如下修改。

我们这里首先增加分页功能
在Gemfile中增加

+gem 'will_paginate-bootstrap'

在app/views/jobs/index.html.erb文件最后增加

 +<div class="text-center">
 +    <%= will_paginate @jobs, renderer: BootstrapPagination::Rails %>
 +</div>

增加好分页功能后,
修改app/controllers/jobs_controller.rb文件

   def index
      @jobs = case params[:order]
              when 'by_lower_bound'
 -             Job.published.order("wage_lower_bound DESC")
                             Job.published.order('wage_lower_bound DESC').search(params[:search]).paginate(page: params[:page], per_page: 5)
              when 'by_upper_bound'
 -            Job.published.order("wage_upper_bound DESC")
                            Job.published.order('wage_upper_bound DESC').search(params[:search]).paginate(page: params[:page], per_page: 5)
              else
 -            Job.published.recent.search(params[:search])
 +                      Job.published.recent.search(params[:search]).paginate(page: params[:page], per_page: 5)
            end
          end

好了,去试一下搜索功能吧!

← 国贸Meetup - Atom插件实现代码美化排版篇 html作业 →
 
comments powered by Disqus