Suburb auto-complete functionality for the new landing page.

app/assets/javascripts/search/landing_page.js.coffee.erb

@@ -2,22 +2,7 @@ $(document).ready ->
     setup_background()
     setup_offcanvas_panel()
     setup_login_handlers()
-
-    spinner = new Spinner({length: 10, width: 10, color: '#000'})
-
-
-
-
-    $("#suburb_search").autocomplete
-        source: $('#suburb_search').data('autocomplete-source')
-        minLength: 3
-        delay: 500
-        search: (event, ui) ->
-            $("#suburb_search").after($(spinner.spin().el).css("left", "93%").css("margin-top": "35px"))
-
-        response: (event, ui) ->
-            spinner.stop()
-
+    setup_suburbs_autocomplete()
 
 setup_background = ->
     if $("#image-url-container").length > 0
@@ -47,3 +32,23 @@ setup_login_handlers = ->
         $("#sign-out-link").show()
 
         $("#sidebarButton").trigger("click")
+
+setup_suburbs_autocomplete = ->
+    spinner = new Spinner({length: 10, width: 10, color: '#000'})
+
+    $("#suburb_search").autocomplete
+        source: $('#suburb_search').data('autocomplete-source')
+        minLength: 3
+        delay: 500
+        search: (event, ui) ->
+            $("#suburb_search").after($(spinner.spin().el).css("left", "93%").css("margin-top": "35px"))
+        response: (event, ui) ->
+            spinner.stop()
+        select: (event, ui) ->
+            $("#suburb_id").val(ui.item.id)
+        messages:
+            noResults: ""
+            results: ->
+
+    $("#suburb_search").keypress ->
+        $("#suburb_id").val('')

app/assets/stylesheets/search/auto_complete.css.scss

@@ -1,3 +1,6 @@
+@import "foundation/variables";
+@import "foundation/components/global";
+
 ul.ui-autocomplete {
   position: absolute;
   list-style: none;
@@ -10,10 +13,19 @@ ul.ui-autocomplete {
     border-top: solid 1px #DDD;
     margin: 0;
     padding: 0;
+    font-size: 0.7em;
     a {
       color: #000;
       display: block;
       padding: 3px;
+
+      &:visited {
+        color: #000;
+      }
+
+      &:hover {
+        color: $primary-color
+      }
     }
     a.ui-state-hover, a.ui-state-active {
       background-color: #FFFCB2;

app/controllers/enterprises_controller.rb

@@ -33,7 +33,7 @@ class EnterprisesController < BaseController
   end
 
   def search
-    suburb = Suburb.find_by_postcode(params[:suburb_search])
+    suburb = Suburb.find(params[:suburb_id]) if params[:suburb_id].present?
     @enterpsises = Enterprise.find_near(suburb)
     @enterprises_json = @enterpsises.to_gmaps4rails
     render :layout => "landing_page"

app/controllers/suburbs_controller.rb

@@ -1,6 +1,5 @@
 class SuburbsController < ActionController::Base
   def index
-    @suburbs = Suburb.order(:name).where("lower(name) like ?", "%#{params[:term].downcase}%")
-    render json: @suburbs.map{ |suburb| "#{suburb.name}, #{suburb.postcode}" }
+    @suburbs = Suburb.matching(params[:term]).order(:name).limit(8)
   end
 end

app/models/suburb.rb

@@ -1,3 +1,9 @@
 class Suburb < ActiveRecord::Base
   belongs_to :state, :class_name => Spree::State
+
+  delegate :name, to: :state, prefix: true
+
+  scope :matching , ->(term) {
+    where("lower(name) like ? or cast(postcode as text) like ?", "%#{term.to_s.downcase}%", "%#{term}%")
+  }
 end

app/views/enterprises/search.html.haml

@@ -13,5 +13,5 @@
   .row
     .large-12.large-centered.columns
       .centered
-        = "No distribution hubs found within #{Enterprise::ENTERPRISE_SEARCH_RADIUS} kilometer radius"
+        = "Nothing foud that matches your search criteria"
         = link_to "Try again...", new_landing_page_path

app/views/home/new_landing_page.html.haml

@@ -8,7 +8,8 @@
           = form_tag search_enterprises_path do
             .large-10.columns
               = text_field_tag :suburb_search, "",
-                data: { autocomplete_source: suburbs_path }, class: "right", placeholder: "Enter your postcode..."
+                data: { autocomplete_source: suburbs_path }, class: "right", placeholder: "Enter your suburb or postcode..."
+              = hidden_field_tag :suburb_id
             .large-2.columns
               = submit_tag "Search", class: "button-huge"
         .row

app/views/suburbs/index.json.rabl

@@ -0,0 +1,3 @@
+collection @suburbs
+attributes :id
+node(:label) { |suburb| "#{suburb.name} (#{suburb.state_name}), #{suburb.postcode}" }

spec/features/consumer/landing_page_spec.rb

@@ -41,4 +41,25 @@ feature %q{
       page.should_not have_content("Sign Out")
     end
   end
+
+  describe "suburb search" do
+    before(:each) do
+      state_id_vic = Spree::State.where(abbr: "Vic").first.id
+      Suburb.create(name: "Camberwell", postcode: 3124, latitude: -37.824818, longitude: 145.057957, state_id: state_id_vic)
+    end
+
+    it "should auto complete suburbs" do
+      suburb_search_field_id = "suburb_search"
+
+      fill_in suburb_search_field_id, :with => "Cambe"
+
+      page.execute_script %Q{ $('##{suburb_search_field_id}').trigger("focus") }
+      page.execute_script %Q{ $('##{suburb_search_field_id}').trigger("keydown") }
+
+      sleep 1
+
+      page.should have_content("Camberwell")
+      page.should have_content("3124")
+    end
+  end
 end

spec/models/suburb_spec.rb

@@ -2,4 +2,23 @@ require 'spec_helper'
 
 describe Suburb do
   it { should belong_to(:state) }
+  it { should delegate(:name).to(:state).with_prefix }
+
+  describe "searching for matching suburbs" do
+    before(:each) do
+      Suburb.create(name: "Camberwell", postcode: 3124, latitude: -37.824818, longitude: 145.057957, state_id: Spree::State.first)
+    end
+
+    it "should find suburb on part of name" do
+      Suburb.matching("Camb").count.should be > 0
+    end
+
+    it "should find suburb on part of postcode" do
+      Suburb.matching(312).count.should be > 0
+    end
+
+    it "should find nothing where part doesn't match" do
+      Suburb.matching("blahblah1234#!!!").count.should_not be > 0
+    end
+  end
 end