Replace typeahead with simpler autocomplete

app/assets/javascripts/application.js

@@ -23,7 +23,6 @@
 //= require franceconnect
 //= require bootstrap-wysihtml5
 //= require bootstrap-wysihtml5/locales/fr-FR
-//= require handlebars
 
 $(document).on('turbolinks:load', application_init);
 

app/assets/javascripts/old_design/admin_procedures_modal.js

@@ -57,32 +57,7 @@ function validatePath(path) {
 }
 
 function path_type_init() {
-  display = 'label';
-
-  var bloodhound = new Bloodhound({
-    datumTokenizer: Bloodhound.tokenizers.obj.whitespace(display),
-    queryTokenizer: Bloodhound.tokenizers.whitespace,
-
-    remote: {
-      url: '/admin/procedures/path_list?request=%QUERY',
-      wildcard: '%QUERY'
-    }
-  });
-  bloodhound.initialize();
-
-  $("#procedure_path").typeahead({
-    minLength: 1
-  }, {
-    display: display,
-    source: bloodhound,
-    templates: {
-      empty: 'Ce lien est disponible !',
-      suggestion: Handlebars.compile("<div class='path-mine-{{mine}}'>{{label}}</div>")
-    },
-    limit: 5
-  });
-
-  $('#procedure_path').bind('typeahead:select', function(ev, suggestion) {
+  $('#procedure_path').bind('autocomplete:select', function(ev, suggestion) {
     togglePathMessage(true, suggestion['mine']);
   });
 }

app/assets/javascripts/old_design/carte/carte.js

@@ -148,8 +148,8 @@ function jsObject_to_array(qp_list) {
 }
 
 function add_event_search_address() {
-  $("#search-by-address input[type='address']").bind('typeahead:select', function (ev, seggestion) {
-    get_address_point(seggestion['label']);
+  $("#search-by-address input[type='address']").bind('autocomplete:select', function (ev, suggestion) {
+    get_address_point(suggestion['label']);
   });
 
   $("#search-by-address input[type='address']").keypress(function (e) {

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

app/javascript/packs/application-old.js

@@ -1,7 +1,6 @@
 import Turbolinks from 'turbolinks';
 import Rails from 'rails-ujs';
 import ActiveStorage from '../shared/activestorage/ujs';
-import Bloodhound from 'bloodhound-js';
 import jQuery from 'jquery';
 
 // Include runtime-polyfills for older browsers.
@@ -9,11 +8,9 @@ import jQuery from 'jquery';
 // required by the browsers we support will be included.
 import 'babel-polyfill';
 
-import 'typeahead.js';
-
 import '../shared/sentry';
 import '../shared/rails-ujs-fix';
-import '../shared/champs/address';
+import '../shared/autocomplete';
 
 // Start Rails helpers
 Rails.start();
@@ -25,8 +22,6 @@ if (process.env['RAILS_ENV'] === 'test') {
   jQuery.fx.off = true;
 }
 
-// Expose globals
-window.Bloodhound = Bloodhound;
 // Export jQuery globally for legacy Javascript files used in the old design
 jQuery.rails = Rails;
 window.$ = jQuery;

app/javascript/packs/application.js

@@ -10,11 +10,9 @@ import jQuery from 'jquery';
 // required by the browsers we support will be included.
 import 'babel-polyfill';
 
-import 'typeahead.js';
-
 import '../shared/sentry';
 import '../shared/rails-ujs-fix';
-import '../shared/champs/address';
+import '../shared/autocomplete';
 
 import '../new_design/buttons';
 import '../new_design/form-validation';

app/javascript/shared/autocomplete.js

@@ -0,0 +1,47 @@
+import $ from 'jquery';
+import autocomplete from 'autocomplete.js';
+
+const sources = [
+  {
+    type: 'address',
+    url: '/ban/search'
+  },
+  {
+    type: 'path',
+    url: '/admin/procedures/path_list'
+  }
+];
+
+const options = {
+  autoselect: true,
+  minLength: 1
+};
+
+function selector(type) {
+  return `[data-autocomplete=${type}]`;
+}
+
+function source(url) {
+  return {
+    source(query, callback) {
+      $.getJSON(url, { request: query }).then(callback);
+    },
+    templates: {
+      suggestion({ label, mine }) {
+        const mineClass = `path-mine-${mine ? 'true' : 'false'}`;
+        const openTag = `<div class="aa-suggestion ${mineClass}">`;
+        return autocomplete.escapeHighlightedString(label, openTag, '</div>');
+      }
+    }
+  };
+}
+
+addEventListener('turbolinks:load', function() {
+  for (let { type, url } of sources) {
+    let select = autocomplete(selector(type), options, [source(url)]);
+    select.on('autocomplete:selected', ({ target }, suggestion) => {
+      $(target).trigger('autocomplete:select', suggestion);
+      select.autocomplete.setVal(suggestion.label);
+    });
+  }
+});

app/javascript/shared/champs/address.js

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

app/views/admin/procedures/_modal_publish.html.haml

@@ -24,6 +24,7 @@
               = text_field_tag('procedure_path', @procedure.default_path,
                                 id: 'procedure_path',
                                 placeholder: 'Chemin vers la procédure',
+                                data: { autocomplete: 'path' },
                                 class: 'form-control',
                                 maxlength: 50,
                                 style: 'width: 300px; display: inline;')

app/views/shared/dossiers/editable_champs/_address.html.haml

@@ -1,4 +1,4 @@
 = form.text_field :value,
-  'data-address': 'true',
+  data: { address: true, autocomplete: 'address' },
   placeholder: champ.libelle,
   required: champ.mandatory?

app/views/users/carte/show.html.haml

@@ -12,7 +12,7 @@
         Ajouter une zone
 
       %span#search-by-address{ style: 'margin-left: 20px;' }
-        %input.form-control{ type: :address, placeholder: 'Rechercher une adresse' }
+        %input.form-control{ type: :address, data: { autocomplete: 'address' }, placeholder: 'Rechercher une adresse' }
       %br
       %br