Replace typeahead with simpler autocomplete

app/assets/stylesheets/admin_procedures_modal.scss

@@ -9,16 +9,16 @@
 }
 
 #publish-modal {
-  .twitter-typeahead {
+  .algolia-autocomplete {
     width: 300px;
   }
 
-  .tt-menu {
+  .aa-dropdown-menu {
     width: 300px;
   }
 
   // Fix the input not being displayed on the same line than the text before
-  .tt-input {
+  .aa-input {
     vertical-align: initial !important;
   }
 }

app/assets/stylesheets/application.scss

@@ -40,7 +40,7 @@
 // = require siret
 // = require support_navigator_banner
 // = require switch_menu
-// = require typeahead
+// = require autocomplete
 // = require users
 // = require attestation_template_edit
 // = require attestation_recapitulatif

app/assets/stylesheets/autocomplete.scss

@@ -0,0 +1,33 @@
+.algolia-autocomplete {
+  width: 100%;
+}
+
+.algolia-autocomplete .aa-input,
+.algolia-autocomplete .aa-hint {
+  width: 100%;
+}
+
+.algolia-autocomplete .aa-hint {
+  color: #999999;
+}
+
+.algolia-autocomplete .aa-dropdown-menu {
+  width: 100%;
+  background-color: #FFFFFF;
+  border: 1px solid #999999;
+  border-top: none;
+}
+
+.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
+  cursor: pointer;
+  padding: 5px 4px;
+}
+
+.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
+  background-color: #B2D7FF;
+}
+
+.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
+  font-weight: bold;
+  font-style: normal;
+}

app/assets/stylesheets/carte.scss

@@ -121,11 +121,11 @@
 }
 
 #search-by-address {
-  .twitter-typeahead {
+  .algolia-autocomplete {
     width: 555px;
   }
 
-  .tt-menu {
+  .aa-dropdown-menu {
     width: 555px;
   }
 }

app/assets/stylesheets/description.scss

@@ -45,7 +45,7 @@
   @extend .col-md-6;
   @extend .col-lg-6;
 
-  .twitter-typeahead {
+  .algolia-autocomplete {
     width: 100%;
 
     input {
@@ -54,7 +54,7 @@
     }
   }
 
-  .tt-menu {
+  .aa-dropdown-menu {
     width: 100%;
   }
 }

app/assets/stylesheets/new_design/forms.scss

@@ -228,18 +228,18 @@
     // scss-lint:enable
   }
 
-  .twitter-typeahead {
+  .algolia-autocomplete {
     margin-bottom: 2 * $default-padding;
   }
 
-  input.tt-input,
-  input.tt-hint {
+  input.aa-input,
+  input.aa-hint {
     border-radius: 4px;
     border: solid 1px $border-grey;
     padding: $default-padding;
   }
 
-  input.tt-hint {
+  input.aa-hint {
     color: $grey;
   }
 

app/assets/stylesheets/new_design/new_application.scss

@@ -5,6 +5,6 @@
 // = require ./fonts
 // = require leaflet.1.1.0
 // = require select2
-// = require typeahead
+// = require autocomplete
 // = require_tree .
 // = stub ./print.scss

app/assets/stylesheets/typeahead.scss

@@ -1,29 +0,0 @@
-.twitter-typeahead {
-  width: 100%; // http://stackoverflow.com/questions/17957513/extending-the-width-of-bootstrap-typeahead-to-match-input-field
-}
-
-.tt-menu {
-  padding: 8px 0;
-  background-color: #FFFFFF;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 8px;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-}
-
-.tt-suggestion {
-  padding: 3px 20px;
-  font-size: 18px;
-  line-height: 24px;
-}
-
-.tt-suggestion:hover {
-  cursor: pointer;
-  color: #FFFFFF;
-  background-color: #0097CF;
-}
-
-.tt-suggestion.tt-cursor {
-  color: #FFFFFF;
-  background-color: #0097CF;
-
-}