Form: add address auto complete

app/assets/javascripts/new_design/application.js

@@ -18,4 +18,5 @@
 //= require highcharts
 //= require chartkick
 //= require select2
+//= require typeahead.bundle
 //= require_tree .

app/assets/javascripts/new_design/champs/address.js

@@ -0,0 +1,27 @@
+(function () {
+  var display = 'label';
+
+  var bloodhound = new Bloodhound({
+    datumTokenizer: Bloodhound.tokenizers.obj.whitespace(display),
+    queryTokenizer: Bloodhound.tokenizers.whitespace,
+
+    remote: {
+      url: '/ban/search?request=%QUERY',
+      wildcard: '%QUERY'
+    }
+  });
+
+  bloodhound.initialize();
+
+  var bindTypeahead = function() {
+    $("input[data-address='true']").typeahead({
+      minLength: 1
+    }, {
+      display: display,
+      source: bloodhound,
+      limit: 5
+    });
+  };
+
+  document.addEventListener('turbolinks:load', bindTypeahead);
+})();

app/assets/stylesheets/new_design/forms.scss

@@ -12,7 +12,7 @@
     display: inline-block;
   }
 
-  input[type=text],
+  input[type=text]:not([data-address='true']),
   input[type=email],
   input[type=password],
   input[type=date],
@@ -116,6 +116,21 @@
     // scss-lint:enable
   }
 
+  .twitter-typeahead {
+    margin-bottom: 2 * $default-padding;
+  }
+
+  input.tt-input,
+  input.tt-hint {
+    border-radius: 4px;
+    border: solid 1px $border-grey;
+    padding: $default-padding;
+  }
+
+  input.tt-hint {
+    color: $grey;
+  }
+
   .datetime {
     input[type=date] {
       display: inline-block;

app/assets/stylesheets/new_design/new_application.scss

@@ -5,4 +5,5 @@
 // = require ./fonts
 // = require leaflet.1.1.0
 // = require select2
+// = require typeahead
 // = require_tree .

app/views/new_gestionnaire/dossiers/champs/_address.html.haml

@@ -1,6 +1,7 @@
 = render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
 
 %input{ type: 'text',
+  'data-address': 'true',
   name: "champs['#{champ.id}']",
   id: "champs_#{champ.id}",
   placeholder: champ.libelle,