ch420/app/views/supporters/_form.slim

h1 = title t('.title_html')
= simple_form_for @supporter do |f|
  = f.input :first_name
  = f.input :last_name
  = f.input :street
  = f.input :city
  = f.input :zip
  = f.input :email
  = 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',
    }
  });
  
  var suggestion_template = function (data) {
      return '<p>' + data.plz + ' - ' + data.city + '</p>';
  }
  
  $('#supporter_city').typeahead({
    minLength: 2,
  },{
  limit: 20,
  display: 'city',
  templates: {
    suggestion: function (data) {
        return suggestion_template(data);
    }
  },
    source: cities 
  }).on('typeahead:selected', function(event, datum) {
    $("#supporter_zip").val(datum.plz);
  });
    
  $('#supporter_zip').typeahead({
    minLength: 2,
  },{
    limit: 20,
    display: 'plz',
    templates: {
      suggestion: function (data) {
          return suggestion_template(data);
      }
    },
    source: cities 
  }).on('typeahead:selected', function(event, datum) {
    $("#supporter_city").val(datum.city);
  });