Implement autocomplete

Gemfile

@@ -17,6 +17,7 @@ gem 'protected_attributes'
 
 # Front end
 gem 'jquery-rails'
+gem 'jquery-ui-rails'
 gem 'haml-rails', '~> 0.5.3'
 
 # Server for deployment
@@ -80,4 +81,5 @@ group :development do
   gem 'spring'
   gem 'spring-commands-rspec'
   gem 'listen', '~> 1.0'
+  gem 'pry-rails'
 end

Gemfile.lock

@@ -107,6 +107,8 @@ GEM
     jquery-rails (3.1.0)
       railties (>= 3.0, < 5.0)
       thor (>= 0.14, < 2.0)
+    jquery-ui-rails (5.0.0)
+      railties (>= 3.2.16)
     json (1.8.1)
     kaminari (0.16.1)
       actionpack (>= 3.0.0)
@@ -118,6 +120,7 @@ GEM
     mail (2.5.4)
       mime-types (~> 1.16)
       treetop (~> 1.4.8)
+    method_source (0.8.2)
     mime-types (1.25.1)
     mini_portile (0.6.0)
     minitest (5.4.0)
@@ -147,6 +150,12 @@ GEM
     powerpack (0.0.9)
     protected_attributes (1.0.8)
       activemodel (>= 4.0.1, < 5.0)
+    pry (0.10.0)
+      coderay (~> 1.1.0)
+      method_source (~> 0.8.1)
+      slop (~> 3.4)
+    pry-rails (0.3.2)
+      pry (>= 0.9.10)
     quiet_assets (1.0.3)
       railties (>= 3.1, < 5.0)
     rack (1.5.2)
@@ -276,6 +285,7 @@ DEPENDENCIES
   geocoder
   haml-rails (~> 0.5.3)
   jquery-rails
+  jquery-ui-rails
   kaminari
   listen (~> 1.0)
   newrelic_rpm
@@ -284,6 +294,7 @@ DEPENDENCIES
   pg_search
   poltergeist
   protected_attributes
+  pry-rails
   quiet_assets (>= 1.0.2)
   rack-cors
   rack-timeout

app/assets/javascripts/application.js

@@ -12,6 +12,7 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require jquery-ui
 //= require bootstrap
 //= require bootstrap-modal
 //= require_tree .

app/assets/javascripts/orgs_autocomplete.js.coffee

@@ -0,0 +1,3 @@
+jQuery ->
+  $('#location_organization_id').autocomplete
+    source: $('#location_organization_id').data('autocomplete-source')

app/assets/stylesheets/application.css.scss

@@ -59,7 +59,6 @@
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
   -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
   box-shadow: 0 1px 2px rgba(0,0,0,.15);
-
   border:1px solid #C8D4E8;
   margin-bottom:20px;
   header
@@ -188,3 +187,26 @@ a.boxed-action:hover, a.boxed-action:active
     margin-bottom:0px;
   }
 }
+
+ul.ui-autocomplete {
+  position: absolute;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border: solid 1px #999;
+  cursor: default;
+  li {
+    background-color: #FFF;
+    border-top: solid 1px #DDD;
+    margin: 0;
+    padding: 0;
+    a {
+      color: #000;
+      display: block;
+      padding: 3px;
+    }
+    a.ui-state-hover, a.ui-state-active {
+      background-color: #FFFCB2;
+    }
+  }
+}

app/controllers/admin/locations_controller.rb

@@ -50,6 +50,10 @@ def new
 
     def create
       @location = Location.new(params[:location])
+      if Organization.exists?(name: params[:location][:organization_id])
+        organization_id = Organization.find_by(name: params[:location][:organization_id]).id
+      end
+      @location.organization_id = organization_id
       @admin_decorator = AdminDecorator.new(current_admin)
       @orgs = @admin_decorator.orgs
 

app/controllers/admin/organizations_controller.rb

@@ -44,7 +44,6 @@ def new
 
     def create
       @organization = Organization.new(params[:organization])
-
       respond_to do |format|
         if @organization.save
           format.html do
@@ -73,5 +72,10 @@ def confirm_delete_organization
         format.js
       end
     end
+
+    def populate_autocomplete
+      @organizations = Organization.order(:name).where('name ilike ?', "%#{params[:term]}%")
+      render json: @organizations.map(&:name)
+    end
   end
 end

app/views/admin/locations/forms/_new_location_form.html.haml

@@ -9,7 +9,7 @@
   %header
     = f.label :organization_id, 'Choose an organization to create this location for.'
   %p
-    = f.select :organization_id, @orgs.collect { |org| [org.second, org.first] }, include_blank: true
+    = f.text_field :organization_id, data: { autocomplete_source: admin_organizations_populate_autocomplete_path }, title: 'Start typing the name of the organization for this location and select it from the dropdown'
 
 = render 'admin/locations/forms/location_name', f: f
 = render 'admin/locations/forms/admin_emails', f: f

config/routes.rb

@@ -19,6 +19,7 @@
 
     resources :organizations, except: :show
 
+    get 'organizations/populate_autocomplete', to: 'organizations#populate_autocomplete'
     get 'locations/:location_id/services/confirm_delete_service', to: 'services#confirm_delete_service', as: :confirm_delete_service
     get 'organizations/confirm_delete_organization', to: 'organizations#confirm_delete_organization', as: :confirm_delete_organization
     get 'locations/confirm_delete_location', to: 'locations#confirm_delete_location', as: :confirm_delete_location

spec/support/features/form_helpers.rb

@@ -161,7 +161,7 @@ def delete_all_urls
     end
 
     def fill_in_all_required_fields
-      select 'Parent Agency', from: 'location_organization_id'
+      fill_in 'location_organization_id', with: 'Parent Agency'
       fill_in 'location_name', with: 'New Parent Agency location'
       fill_in 'location_description', with: 'new description'
       click_link 'Add a street address'