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);
+  });