<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Pieces of Web &#187; scopes</title>
	<atom:link href="http://danengle.us/tag/scopes/feed/" rel="self" type="application/rss+xml" />
	<link>http://danengle.us</link>
	<description>Dan Engle's Rails and Web Development Blog</description>
	<lastBuildDate>Fri, 29 May 2009 21:46:24 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>More Advanced Searching Techniques with Rails</title>
		<link>http://danengle.us/2009/03/more-advanced-searching-techniques-with-rails/</link>
		<comments>http://danengle.us/2009/03/more-advanced-searching-techniques-with-rails/#comments</comments>
		<pubDate>Fri, 06 Mar 2009 19:10:30 +0000</pubDate>
		<dc:creator>Dan</dc:creator>
				<category><![CDATA[Ruby on Rails]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[jqueryui]]></category>
		<category><![CDATA[rails]]></category>
		<category><![CDATA[scopes]]></category>
		<category><![CDATA[searching]]></category>

		<guid isPermaLink="false">http://danengle.us/?p=12</guid>
		<description><![CDATA[Another look at using anonymous scopes inside a rails app to apply different sets of conditions to an advanced search.  Also, instead of using the boring rails date_select helper to select dates, I chose to use Filament Groups jQuery Date Range Picker plugin to select a range of dates.]]></description>
			<content:encoded><![CDATA[<p>For my first real post, I want to start off looking at searching and drilling down a list of objects.  It&#8217;s based on <a href="http://railscasts.com/episodes/112-anonymous-scopes">Railscast 112</a>, the one on anonymous scopes, but with a few other things thrown in for good measure.  For the purposes of this example, I&#8217;m going to use these classes</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#008000; font-style:italic;"># models/employee.rb</span>
<span style="color:#9966CC; font-weight:bold;">class</span> Employee <span style="color:#006600; font-weight:bold;">&lt;</span> <span style="color:#6666ff; font-weight:bold;">ActiveRecord::Base</span>
  belongs_to <span style="color:#ff3333; font-weight:bold;">:employer</span>
  validates_presence_of <span style="color:#ff3333; font-weight:bold;">:employer_id</span>, <span style="color:#ff3333; font-weight:bold;">:first_name</span>, <span style="color:#ff3333; font-weight:bold;">:last_name</span>, <span style="color:#ff3333; font-weight:bold;">:start_date</span>, <span style="color:#ff3333; font-weight:bold;">:salary</span>
<span style="color:#9966CC; font-weight:bold;">end</span>
&nbsp;
<span style="color:#008000; font-style:italic;"># models/employer.rb</span>
<span style="color:#9966CC; font-weight:bold;">class</span> Employer <span style="color:#006600; font-weight:bold;">&lt;</span> <span style="color:#6666ff; font-weight:bold;">ActiveRecord::Base</span>
  belongs_to <span style="color:#ff3333; font-weight:bold;">:region</span>
  has_many <span style="color:#ff3333; font-weight:bold;">:employees</span>
  validates_presence_of <span style="color:#ff3333; font-weight:bold;">:name</span>
  validates_uniqueness_of <span style="color:#ff3333; font-weight:bold;">:name</span>
<span style="color:#9966CC; font-weight:bold;">end</span>
&nbsp;
<span style="color:#008000; font-style:italic;"># models/region.rb</span>
<span style="color:#9966CC; font-weight:bold;">class</span> Region <span style="color:#006600; font-weight:bold;">&lt;</span> <span style="color:#6666ff; font-weight:bold;">ActiveRecord::Base</span>
  has_many <span style="color:#ff3333; font-weight:bold;">:employers</span>
  validates_presence_of <span style="color:#ff3333; font-weight:bold;">:name</span>
  validates_uniqueness_of <span style="color:#ff3333; font-weight:bold;">:name</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>One thing that always seems to be a problem for me, is working with dates in rails.  So, instead of using the classic rails date_select, I am going to use <a href="http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/">Filament Groups jQuery UI Date Range Picker</a>.</p>
<p>To begin, I generated the scaffold for the three models</p>
<pre>./script/generate scaffold region name:string
./script/generate scaffold employer name:string region_id:integer
./script/generate scaffold employee employer_id:integer first_name:string last_name:string start_date:date salary:integer</pre>
<p>I made a few changes to the views to include select lists where appropriate, but thats not so important at the moment.  Take a look at the download if you would like to see those view changes.</p>
<p>The main stuff happens in the employees_controller.  I wanted to keep this fairly simple, so there is no separate search action. It works out better this way anyway.  Here is what the employees index action looks like</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">def</span> index
  <span style="color:#0066ff; font-weight:bold;">@search</span> = params<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:search</span><span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color:#9900CC;">blank</span>? ? <span style="color:#006600; font-weight:bold;">&#123;</span><span style="color:#006600; font-weight:bold;">&#125;</span> : params<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:search</span><span style="color:#006600; font-weight:bold;">&#93;</span>
  get_dates
  collect_employees
  <span style="color:#0066ff; font-weight:bold;">@employees</span> = <span style="color:#0066ff; font-weight:bold;">@scope</span>.<span style="color:#9900CC;">find</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#ff3333; font-weight:bold;">:all</span>, <span style="color:#ff3333; font-weight:bold;">:order</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">'employers.name, last_name'</span>, <span style="color:#ff3333; font-weight:bold;">:include</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#ff3333; font-weight:bold;">:employer</span><span style="color:#006600; font-weight:bold;">&#41;</span>
  respond_to <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">|</span>format<span style="color:#006600; font-weight:bold;">|</span>
    <span style="color:#CC0066; font-weight:bold;">format</span>.<span style="color:#9900CC;">html</span> <span style="color:#008000; font-style:italic;"># index.html.erb</span>
    <span style="color:#CC0066; font-weight:bold;">format</span>.<span style="color:#9900CC;">xml</span>  <span style="color:#006600; font-weight:bold;">&#123;</span> render <span style="color:#ff3333; font-weight:bold;">:xml</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#0066ff; font-weight:bold;">@employees</span> <span style="color:#006600; font-weight:bold;">&#125;</span>
  <span style="color:#9966CC; font-weight:bold;">end</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>As you can see, @search will be a blank hash if there is not an incoming search parameter.</p>
<p>Both the get_dates and collect_employees methods, are protected methods in the employees controller.  The method get_dates, takes the single input field of the calendar select, and splits up the dates so employees start_dates can be filtered through any range of dates.  It looks like this&#8230;</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">def</span> get_dates
  <span style="color:#9966CC; font-weight:bold;">unless</span> <span style="color:#0066ff; font-weight:bold;">@search</span>.<span style="color:#9900CC;">blank</span>?
    dates = <span style="color:#0066ff; font-weight:bold;">@search</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:start</span><span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color:#CC0066; font-weight:bold;">split</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#996600;">'-'</span><span style="color:#006600; font-weight:bold;">&#41;</span>
    dates.<span style="color:#9900CC;">each_with_index</span> <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">|</span>d, i<span style="color:#006600; font-weight:bold;">|</span>
      <span style="color:#0066ff; font-weight:bold;">@search</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#996600;">&quot;date_#{i}&quot;</span>.<span style="color:#9900CC;">to_sym</span><span style="color:#006600; font-weight:bold;">&#93;</span> = <span style="color:#CC00FF; font-weight:bold;">Date</span>.<span style="color:#9900CC;">parse</span><span style="color:#006600; font-weight:bold;">&#40;</span>d.<span style="color:#9900CC;">strip</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#9966CC; font-weight:bold;">unless</span> d.<span style="color:#9900CC;">blank</span>?
    <span style="color:#9966CC; font-weight:bold;">end</span>
  <span style="color:#9966CC; font-weight:bold;">end</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>The get_dates method extracts the two dates from @search[:start] and creates two new attributes, date_0 and date_1.  This also keeps the :start attribute intact, and allows it to be redisplayed in the view.  Also, if the start field only includes 1 date, the query will find all employees that started on that date till now.</p>
<p>The next method should look familiar if you watched <a href="http://railscasts.com/episodes/112-anonymous-scopes">railscast 112</a> .  Here it is&#8230;</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">def</span> collect_employees
  <span style="color:#0066ff; font-weight:bold;">@scope</span> = Employee.<span style="color:#9900CC;">scoped</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#123;</span><span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>
  <span style="color:#0066ff; font-weight:bold;">@scope</span> = <span style="color:#0066ff; font-weight:bold;">@scope</span>.<span style="color:#9900CC;">scoped</span> <span style="color:#ff3333; font-weight:bold;">:conditions</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#996600;">'first_name like ?'</span>, <span style="color:#996600;">&quot;%#{@search[:first_name]}%&quot;</span><span style="color:#006600; font-weight:bold;">&#93;</span> <span style="color:#9966CC; font-weight:bold;">unless</span> <span style="color:#0066ff; font-weight:bold;">@search</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:first_name</span><span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color:#9900CC;">blank</span>?
  <span style="color:#0066ff; font-weight:bold;">@scope</span> = <span style="color:#0066ff; font-weight:bold;">@scope</span>.<span style="color:#9900CC;">scoped</span> <span style="color:#ff3333; font-weight:bold;">:conditions</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#996600;">'last_name like ?'</span>, <span style="color:#996600;">&quot;%#{@search[:last_name]}%&quot;</span><span style="color:#006600; font-weight:bold;">&#93;</span> <span style="color:#9966CC; font-weight:bold;">unless</span> <span style="color:#0066ff; font-weight:bold;">@search</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:last_name</span><span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color:#9900CC;">blank</span>?
  <span style="color:#0066ff; font-weight:bold;">@scope</span> = <span style="color:#0066ff; font-weight:bold;">@scope</span>.<span style="color:#9900CC;">scoped</span> <span style="color:#ff3333; font-weight:bold;">:conditions</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color:#ff3333; font-weight:bold;">:employer_id</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#0066ff; font-weight:bold;">@search</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:employer_id</span><span style="color:#006600; font-weight:bold;">&#93;</span> <span style="color:#006600; font-weight:bold;">&#125;</span> <span style="color:#9966CC; font-weight:bold;">unless</span> <span style="color:#0066ff; font-weight:bold;">@search</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:employer_id</span><span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color:#9900CC;">blank</span>?
  <span style="color:#0066ff; font-weight:bold;">@scope</span> = <span style="color:#0066ff; font-weight:bold;">@scope</span>.<span style="color:#9900CC;">scoped</span> <span style="color:#ff3333; font-weight:bold;">:conditions</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color:#ff3333; font-weight:bold;">:employers</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color:#ff3333; font-weight:bold;">:region_id</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#0066ff; font-weight:bold;">@search</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:region_id</span><span style="color:#006600; font-weight:bold;">&#93;</span> <span style="color:#006600; font-weight:bold;">&#125;</span> <span style="color:#006600; font-weight:bold;">&#125;</span> <span style="color:#9966CC; font-weight:bold;">unless</span> <span style="color:#0066ff; font-weight:bold;">@search</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:region_id</span><span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color:#9900CC;">blank</span>?
  <span style="color:#0066ff; font-weight:bold;">@scope</span> = <span style="color:#0066ff; font-weight:bold;">@scope</span>.<span style="color:#9900CC;">scoped</span> <span style="color:#ff3333; font-weight:bold;">:conditions</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#996600;">'salary &gt;= ?'</span>, <span style="color:#0066ff; font-weight:bold;">@search</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:salary_min</span><span style="color:#006600; font-weight:bold;">&#93;</span> <span style="color:#006600; font-weight:bold;">&#93;</span> <span style="color:#9966CC; font-weight:bold;">unless</span> <span style="color:#0066ff; font-weight:bold;">@search</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:salary_min</span><span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color:#9900CC;">blank</span>?
  <span style="color:#0066ff; font-weight:bold;">@scope</span> = <span style="color:#0066ff; font-weight:bold;">@scope</span>.<span style="color:#9900CC;">scoped</span> <span style="color:#ff3333; font-weight:bold;">:conditions</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#996600;">'salary &lt;= ?'</span>, <span style="color:#0066ff; font-weight:bold;">@search</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:salary_max</span><span style="color:#006600; font-weight:bold;">&#93;</span> <span style="color:#006600; font-weight:bold;">&#93;</span> <span style="color:#9966CC; font-weight:bold;">unless</span> <span style="color:#0066ff; font-weight:bold;">@search</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:salary_max</span><span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color:#9900CC;">blank</span>?
  <span style="color:#0066ff; font-weight:bold;">@scope</span> = <span style="color:#0066ff; font-weight:bold;">@scope</span>.<span style="color:#9900CC;">scoped</span> <span style="color:#ff3333; font-weight:bold;">:conditions</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#996600;">'start_date &gt;= ?'</span>, <span style="color:#0066ff; font-weight:bold;">@search</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:date_0</span><span style="color:#006600; font-weight:bold;">&#93;</span> <span style="color:#006600; font-weight:bold;">&#93;</span> <span style="color:#9966CC; font-weight:bold;">unless</span> <span style="color:#0066ff; font-weight:bold;">@search</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:date_0</span><span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color:#9900CC;">blank</span>?
  <span style="color:#0066ff; font-weight:bold;">@scope</span> = <span style="color:#0066ff; font-weight:bold;">@scope</span>.<span style="color:#9900CC;">scoped</span> <span style="color:#ff3333; font-weight:bold;">:conditions</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#996600;">'start_date &lt;= ?'</span>, <span style="color:#0066ff; font-weight:bold;">@search</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:date_1</span><span style="color:#006600; font-weight:bold;">&#93;</span> <span style="color:#006600; font-weight:bold;">&#93;</span> <span style="color:#9966CC; font-weight:bold;">unless</span> <span style="color:#0066ff; font-weight:bold;">@search</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:date_1</span><span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color:#9900CC;">blank</span>?
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>As you can see, there is more going on than just refining the results by attributes of the employee.  You can also find employees by their employer and even employees by the region their employer is located in.</p>
<p>I wanted to use a search model, like in <a href="http://railscasts.com/episodes/111-advanced-search-form">railscast 111</a>, so I could use f.text_field throughout the form, but I didn&#8217;t want to create a database object, and my attempts to finesse the code to work in that way proved fruitless.  So, for the view, I used the generic form_for and text_field_tag&#8217;s like this&#8230;</p>

<div class="wp_syntax"><div class="code"><pre class="rails" style="font-family:monospace;"><span style="color:#006600; font-weight:bold;">&lt;%</span> <span style="color:#5A0A0A; font-weight:bold;">form_for</span> <span style="color:#ff3333; font-weight:bold;">:search</span>, <span style="color:#ff3333; font-weight:bold;">:url</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color:#ff3333; font-weight:bold;">:controller</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">'employees'</span>, <span style="color:#ff3333; font-weight:bold;">:action</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">'index'</span> <span style="color:#006600; font-weight:bold;">&#125;</span> <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">%&gt;</span>
  &lt;div&gt;
    &lt;label for=&quot;search_first_name&quot;&gt;First Name:&lt;/label&gt;&lt;br /&gt;
    <span style="color:#006600; font-weight:bold;">&lt;%</span>= text_field_tag <span style="color:#996600;">'search[first_name]'</span>, <span style="color:#0066ff; font-weight:bold;">@search</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:first_name</span><span style="color:#006600; font-weight:bold;">&#93;</span>, <span style="color:#ff3333; font-weight:bold;">:id</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">'search_first_name'</span> <span style="color:#006600; font-weight:bold;">%&gt;</span>
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label for=&quot;search_last_name&quot;&gt;Last Name:&lt;/label&gt;&lt;br /&gt;
    <span style="color:#006600; font-weight:bold;">&lt;%</span>= text_field_tag <span style="color:#996600;">'search[last_name]'</span>, <span style="color:#0066ff; font-weight:bold;">@search</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:last_name</span><span style="color:#006600; font-weight:bold;">&#93;</span>, <span style="color:#ff3333; font-weight:bold;">:id</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">'search_last_name'</span> <span style="color:#006600; font-weight:bold;">%&gt;</span>
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label for=&quot;search_employer_name&quot;&gt;Employer:&lt;/label&gt;&lt;br /&gt;
    <span style="color:#006600; font-weight:bold;">&lt;%</span>= select_tag <span style="color:#996600;">'search[employer_id]'</span>, employee_select_helper<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#996600;">'Employer'</span><span style="color:#006600; font-weight:bold;">&#41;</span>, <span style="color:#ff3333; font-weight:bold;">:id</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">'search_employer_name'</span> <span style="color:#006600; font-weight:bold;">%&gt;</span>
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label for=&quot;search_region_name&quot;&gt;Region:&lt;/label&gt;&lt;br /&gt;
    <span style="color:#006600; font-weight:bold;">&lt;%</span>= select_tag <span style="color:#996600;">'search[region_id]'</span>, employee_select_helper<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#996600;">'Region'</span><span style="color:#006600; font-weight:bold;">&#41;</span>, <span style="color:#ff3333; font-weight:bold;">:id</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">'search_region_name'</span> <span style="color:#006600; font-weight:bold;">%&gt;</span>
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label&gt;Salary&lt;/label&gt;&lt;br /&gt;
    <span style="color:#006600; font-weight:bold;">&lt;%</span>= text_field_tag <span style="color:#996600;">'search[salary_min]'</span>, <span style="color:#0066ff; font-weight:bold;">@search</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:salary_min</span><span style="color:#006600; font-weight:bold;">&#93;</span>, <span style="color:#ff3333; font-weight:bold;">:id</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">'search_salary_min'</span> <span style="color:#006600; font-weight:bold;">%&gt;</span> -
    <span style="color:#006600; font-weight:bold;">&lt;%</span>= text_field_tag <span style="color:#996600;">'search[salary_max]'</span>, <span style="color:#0066ff; font-weight:bold;">@search</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:salary_max</span><span style="color:#006600; font-weight:bold;">&#93;</span>, <span style="color:#ff3333; font-weight:bold;">:id</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">'search_salary_max'</span> <span style="color:#006600; font-weight:bold;">%&gt;</span>
  &lt;/div&gt;
  &lt;div id=&quot;date_search&quot;&gt;
    &lt;label for=&quot;search_start&quot;&gt;Start Date&lt;/label&gt;&lt;br /&gt;
    <span style="color:#006600; font-weight:bold;">&lt;%</span>= text_field_tag <span style="color:#996600;">'search[start]'</span>, <span style="color:#0066ff; font-weight:bold;">@search</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:start</span><span style="color:#006600; font-weight:bold;">&#93;</span>, <span style="color:#ff3333; font-weight:bold;">:id</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">'search_start'</span> <span style="color:#006600; font-weight:bold;">%&gt;</span>
  &lt;/div&gt;
  <span style="color:#006600; font-weight:bold;">&lt;%</span>= submit_tag <span style="color:#996600;">&quot;search&quot;</span> <span style="color:#006600; font-weight:bold;">%&gt;</span>
<span style="color:#006600; font-weight:bold;">&lt;%</span> <span style="color:#9966CC; font-weight:bold;">end</span> <span style="color:#006600; font-weight:bold;">%&gt;</span></pre></div></div>

<p>The employee_select_helper is in the employeesHelper and thanks to some ruby magic, it looks like&#8230;</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">def</span> employee_select_helper<span style="color:#006600; font-weight:bold;">&#40;</span>object<span style="color:#006600; font-weight:bold;">&#41;</span>
    <span style="color:#996600;">'&lt;option&gt;&lt;/option&gt;'</span> <span style="color:#006600; font-weight:bold;">+</span> options_from_collection_for_select<span style="color:#006600; font-weight:bold;">&#40;</span>object.<span style="color:#9900CC;">constantize</span>.<span style="color:#9900CC;">find</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#ff3333; font-weight:bold;">:all</span>, <span style="color:#ff3333; font-weight:bold;">:order</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">'name'</span><span style="color:#006600; font-weight:bold;">&#41;</span>, <span style="color:#996600;">'id'</span>, <span style="color:#996600;">'name'</span>, <span style="color:#0066ff; font-weight:bold;">@search</span><span style="color:#006600; font-weight:bold;">&#91;</span>object.<span style="color:#9900CC;">foreign_key</span>.<span style="color:#9900CC;">to_s</span><span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color:#9900CC;">to_i</span><span style="color:#006600; font-weight:bold;">&#41;</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>I ran into a couple of issues with the daterangepicker plugin displaying the dropdown correctly.  The daterangepicker, by default, appends the slick looking calendar picker to the html document body, but this creates a problem whenever there is data after the daterangepicker, causing it to append to the bottom of the page and not work as expected.  To fix that, I edited the daterangepicker.jQuery.js (around line 269) like this&#8230;</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// from</span>
jQuery<span style="color: #009900;">&#40;</span>options.<span style="color: #660066;">appendTo</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span>rp<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// to</span>
jQuery<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">after</span><span style="color: #009900;">&#40;</span>rp<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>And application.js is simple as this&#8230;</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#search_start&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">daterangepicker</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
		latestDate<span style="color: #339933;">:</span> Date.<span style="color: #660066;">today</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>As for the daterangepicker plugin, I placed all the js files in the javascripts directory and all the css files inside the stylesheets directory.  The plugin also includes an images directory, and in order to avoid having to edit all the image urls inside the css, I just placed the images directory inside the stylesheets directory.  Maybe not a best practice, but it makes things easier at this point.</p>
<p>Now, you can search for employees in any combination of employer, employers region, a start date range, salary range, or first and last name.  This concludes my further exploration of anonymous scopes and the Filament Group jQuery UI Date Range Picker.  Hopefully you found something of value.  The included app uses sqlite3 and also has a little sample data with it.  You should only need to download, unzip and run script/server to see the basic, no style applied employee search app. As always, comments, suggestions and improvements are welcome.</p>
<p><span class="download_link">Download: <a href="http://danengle.us/wp-content/files/searching.zip">searching</a></span></p>
]]></content:encoded>
			<wfw:commentRss>http://danengle.us/2009/03/more-advanced-searching-techniques-with-rails/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
