Install and configure scoped_search.

Gemfile

@@ -16,6 +16,7 @@ gem 'coffee-rails', '~> 4.0.0'
 
 # Use jquery as the JavaScript library
 gem 'jquery-rails'
+gem 'jquery-ui-rails'
 # Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
 gem 'turbolinks'
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
@@ -44,3 +45,6 @@ gem "codeclimate-test-reporter", group: :test, require: nil
 
 # authentication, require rails 4.1 compatible version
 gem 'sorcery', '>= 0.8.6'
+
+# search syntax and autocompletion for search boxes
+gem "scoped_search"

Gemfile.lock

@@ -52,6 +52,8 @@ GEM
     jquery-rails (3.1.1)
       railties (>= 3.0, < 5.0)
       thor (>= 0.14, < 2.0)
+    jquery-ui-rails (5.0.0)
+      railties (>= 3.2.16)
     json (1.8.1)
     jwt (1.0.0)
     mail (2.5.4)
@@ -97,6 +99,8 @@ GEM
       sass (~> 3.2.0)
       sprockets (~> 2.8, <= 2.11.0)
       sprockets-rails (~> 2.0)
+    scoped_search (2.7.1)
+      activerecord (>= 2.1.0)
     sdoc (0.4.0)
       json (~> 1.8)
       rdoc (~> 4.0, < 5.0)
@@ -142,9 +146,11 @@ DEPENDENCIES
   coffee-rails (~> 4.0.0)
   jbuilder (~> 2.0)
   jquery-rails
+  jquery-ui-rails
   rails (= 4.1.4)
   rake
   sass-rails (~> 4.0.3)
+  scoped_search
   sdoc (~> 0.4.0)
   sorcery (>= 0.8.6)
   spring

app/assets/javascripts/application.js

@@ -12,5 +12,6 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require jquery-ui
 //= require turbolinks
 //= require_tree .

app/controllers/people_controller.rb

@@ -1,6 +1,18 @@
 class PeopleController < ApplicationController
   def index
-    @people = Person.all
+    @people = Person.search_for(params[:search], :order => params[:order])
+  rescue => e
+    flash[:error] = e.to_s
+    @people = Person.search_for ''
+  end
+
+  def auto_complete_search
+    begin
+      @items = Person.complete_for(params[:search])
+    rescue ScopedSearch::QueryNotSupported => e
+      @items = [{:error =>e.to_s}]
+    end
+    render :json => @items
   end
 
   def new

app/models/person.rb

@@ -8,6 +8,8 @@ class Person < ActiveRecord::Base
   validates_presence_of :email
   validates_uniqueness_of :email
 
+  scoped_search :on => [ :first_name, :last_name ]
+
   def full_name
     [ first_name, middle_name, last_name ].compact.join(' ')
   end

app/views/people/index.html.erb

@@ -1,5 +1,12 @@
 <h1>People</h1>
 
+<div id="people_search">
+  <%= form_tag people_path, :method => :get do %>
+    <%= auto_complete_field_tag_jquery(:search, params[:search], {:placeholder => "Type Space For Search Options"}) %>
+    <button id='submit_search' style="font-size: 12px;">Search</button>
+  <% end -%>
+</div>
+
 <ul>
 <% @people.each do |person| %>
 <li><%= link_to person.full_name, person %> | <%= link_to "Edit", edit_person_path(person) %> | <%= link_to "Destroy", person, method: :delete %></li>

config/routes.rb

@@ -21,8 +21,11 @@
   # Example resource route (maps HTTP verbs to controller actions automatically):
   #   resources :products
 
-  resources :people
+  resources :people do
+    get :auto_complete_search, :on => :collection
+  end
   get "/people/search/:name", :to => "people#search_by_name"
+
   resources :projects
   resources :sessions