autocomplete for zip and city

app/assets/javascripts/application.js

@@ -14,4 +14,5 @@
 //= require jquery_ujs
 //= require turbolinks
 //= require bootstrap-sprockets
+//= require typeahead.bundle
 //= require_tree .

app/assets/stylesheets/application.sass

@@ -15,6 +15,7 @@
  */
 @import "bootstrap-sprockets"
 @import "bootstrap"
+@import "typeaheadjs"
 
 body
   padding-top: 20px

app/controllers/cities_autocomplete_controller.rb

@@ -0,0 +1,13 @@
+require 'CSV'
+class CitiesAutocompleteController < ApplicationController
+  skip_before_action :verify_authenticity_token
+
+  def index
+    @cities = CSV.read Rails.root.join('db', 'plz_ch.csv')
+
+    @cities = @cities.select { |city| city.first =~ /#{params[:query]}/i || city.last =~ /#{params[:query]}/i  }
+    @cities = @cities.map { |city| { plz: city.first, city: city.last } }
+
+    render json: @cities.uniq
+  end
+end

app/views/layouts/application.html.slim

@@ -5,7 +5,7 @@ html
     = javascript_include_tag 'application', 'data-turbolinks-track' => true
     = csrf_meta_tags
   body
-    = console if Rails.env.development?
+    / = console if Rails.env.development?
     .container
       = render 'shared/flashes'
       = yield

app/views/supporters/_form.slim

@@ -9,3 +9,33 @@ h1 = title t('.title_html')
   = f.input :support, as: :radio_buttons, collection: t('support_type'), label_method: :last, value_method: :first
   = f.input :age_category, as: :radio_buttons, collection: t('age_category'), label_method: :last, value_method: :first
   = f.submit value: t('.submit'), class: 'btn btn-success'
+
+javascript:
+  var cities = new Bloodhound({
+    datumTokenizer: Bloodhound.tokenizers.whitespace,
+    queryTokenizer: Bloodhound.tokenizers.whitespace,
+    remote: {
+      url: '/cities_autocomplete.json?query=%QUERY',
+      wildcard: '%QUERY',
+    }
+  });
+  
+  $('#supporter_city').typeahead({
+    minLength: 2,
+    highlight: true,
+  },{
+    display: 'city',
+    source: cities 
+  }).on('typeahead:selected', function(event, datum) {
+    $("#supporter_zip").val(datum.plz);
+  });
+    
+  $('#supporter_zip').typeahead({
+    minLength: 2,
+    highlight: true,
+  },{
+    display: 'plz',
+    source: cities 
+  }).on('typeahead:selected', function(event, datum) {
+    $("#supporter_city").val(datum.city);
+  });  

spec/controllers/cities_autocomplete_controller_spec.rb

@@ -0,0 +1,12 @@
+require 'rails_helper'
+
+describe CitiesAutocompleteController do
+  describe 'GET index' do
+    it 'searchs for cities' do
+      get :index, query: 'spei', format: :js
+
+      result = JSON.parse response.body
+      expect(result).to eq [{ 'plz' => '9042', 'city' => 'Speicher' }, { 'plz' => '9037', 'city' => 'Speicherschwendi' }]
+    end
+  end
+end

vendor/assets/stylesheets/typeaheadjs.css

@@ -0,0 +1,54 @@
+span.twitter-typeahead {
+  width: 100%;
+}
+.input-group span.twitter-typeahead {
+  display: block !important;
+}
+.input-group span.twitter-typeahead .tt-dropdown-menu {
+  top: 32px !important;
+}
+.input-group.input-group-lg span.twitter-typeahead .tt-dropdown-menu {
+  top: 44px !important;
+}
+.input-group.input-group-sm span.twitter-typeahead .tt-dropdown-menu {
+  top: 28px !important;
+}
+.tt-query {
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.tt-hint {
+  color: #999
+}
+
+.tt-menu {    // used to be tt-dropdown-menu in older versions
+  width: 422px;
+  margin-top: 4px;
+  padding: 4px 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+          box-shadow: 0 5px 10px rgba(0,0,0,.2);
+}
+
+.tt-suggestion {
+  padding: 3px 20px;
+  line-height: 24px;
+}
+
+.tt-suggestion.tt-cursor {
+  color: #fff;
+  background-color: #0097cf;
+
+}
+
+.tt-suggestion p {
+  margin: 0;
+}