Autocomplete le nom de la structure et son siret

app/assets/javascripts/autocomplete_recherche.js

@@ -2,6 +2,10 @@ function estUnCodePostal(texte) {
   return texte.match(/^\d{5}$/);
 }
 
+function capitalise(s) {
+    return s[0].toUpperCase() + s.slice(1);
+}
+
 function construitReponse(item, codePostalSaisi) {
   const ville = item.nom;
   let codePostal = '';
@@ -16,7 +20,7 @@ function construitReponse(item, codePostalSaisi) {
 
 function ajouteReponseAucunResultat(event, ui) {
   if (!ui.content.length) {
-    const recherche = $(".champ-recherche").val();
+    const recherche = $(event.target).val();
     const reponseAucunResultat = {
       value: '',
       label: `Aucun résultat ne correspond à la recherche "${recherche}"`
@@ -32,8 +36,8 @@ function afficheRecherche(boutonAjout, formulaireRecherche) {
   });
 }
 
-document.addEventListener('DOMContentLoaded', () => {
-  $( ".champ-recherche" ).autocomplete({
+function autocompleteRechercheStructure() {
+  return {
     source: function (request, response) {
       $('#bouton-chercher')
         .prop("disabled", true)
@@ -52,9 +56,8 @@ document.addEventListener('DOMContentLoaded', () => {
           dataType: "json",
           success: function (datas) {
             response($.map(datas, function (item) {
-              const reponse = construitReponse(item, data.codePostal)
-              return reponse;
-            }))
+              return construitReponse(item, data.codePostal)
+            }));
           },
           error: function () {
             response([]);
@@ -74,5 +77,53 @@ document.addEventListener('DOMContentLoaded', () => {
     autoFocus: false,
     minLength: 3,
     delay: 100
+  };
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  $(".autocomplete-nom-structure input").autocomplete({
+    source: function (request, response) {
+      const nom = encodeURI(request.term);
+      let code_postal = $('.autocomplete-code-postal input').val().trim();
+      if(code_postal.length != 0) {
+        code_postal = `&code_postal=${encodeURI(code_postal)}`
+      }
+      $.ajax({
+        url: `https://recherche-entreprises.api.gouv.fr/search?q=${nom}${code_postal}&per_page=6`,
+        success: function (datas) {
+          let reponses = [];
+          for(const item of datas.results) {
+            const etablissements = item.matching_etablissements
+              .sort((e1, e2) => {
+                if (e1.est_siege == e2.est_siege) return 0;
+                if (e1.est_siege) return -1;
+                else return 1;
+              });
+            for(const etablissement of etablissements) {
+              const value = capitalise(item.nom_complet.toLowerCase());
+              const label = `${value} - ${etablissement.adresse}`;
+              reponses.push({
+                label: label,
+                value: value,
+                siret: item.siege.siret,
+                code_postal: etablissement.code_postal
+              });
+            }
+          }
+          response(reponses);
+        },
+        error: function () {
+          response([]);
+        }
+      });
+    },
+    response: ajouteReponseAucunResultat,
+    select: function( event, ui ) {
+      $('.autocomplete-siret input').val(ui.item.siret)
+      $('.autocomplete-code-postal input').val(ui.item.code_postal)
+    },
+    autoFocus: false,
+    minLength: 3,
+    delay: 150
   });
 });

app/assets/stylesheets/admin/composants/_autocomplete.scss

@@ -8,6 +8,7 @@
   overflow: hidden;
   padding: 0.3rem 0;
   box-shadow: 0px 0px 8px rgba(30, 65, 106, 0.25);
+  max-width: 45rem;
 
   .ui-menu-item {
     line-height: 1.1rem;

app/components/recherche_structure_component.html.erb

@@ -35,6 +35,7 @@
 </div>
 <script>
 document.addEventListener('DOMContentLoaded', () => {
+  $("#ville_ou_code_postal").autocomplete(autocompleteRechercheStructure());
   $('.ui-menu').addClass('recherche_structure');
 });
 </script>

app/views/admin/structures_locales/_form.html.arb

@@ -6,10 +6,10 @@ div class: 'panel nouvelle_structure' do
   active_admin_form_for [:admin, resource] do |f|
     f.inputs do
       f.object.code_postal = params[:code_postal]&.delete('^0-9') if f.object.code_postal.blank?
-      f.input :nom
+      f.input :code_postal, wrapper_html: { class: 'autocomplete-code-postal' }
+      f.input :nom, wrapper_html: { class: 'autocomplete-nom-structure' }
       f.input :type_structure, as: :select, collection: collection_types_structures
-      f.input :code_postal
-      f.input :siret
+      f.input :siret, wrapper_html: { class: 'autocomplete-siret' }
       if can?(:manage, Compte)
         f.input :parent_id, as: :select, collection: StructureAdministrative.all
       end

app/views/nouvelles_structures/show.html.erb

@@ -30,10 +30,16 @@
       <p class="description"><%= t('.structure.description') %></p>
       <%= structure.inputs do %>
         <% structure.object.code_postal = params[:code_postal]&.delete('^0-9') if structure.object.code_postal.blank? %>
-        <%= structure.input :nom, placeholder: t('.placeholders.structure.nom') %>
+        <%= structure.input :code_postal,
+          placeholder: t('.placeholders.structure.code_postal'),
+          wrapper_html: { class: 'autocomplete-code-postal' }
+        %>
+        <%= structure.input :nom,
+          placeholder: t('.placeholders.structure.nom'),
+          wrapper_html: { class: 'autocomplete-nom-structure' }
+        %>
         <%= structure.input :type_structure, as: :select, collection: collection_types_structures %>
-        <%= structure.input :code_postal, placeholder: t('.placeholders.structure.code_postal') %>
-        <%= structure.input :siret %>
+        <%= structure.input :siret, wrapper_html: { class: 'autocomplete-siret' } %>
       <% end %>
     </div>
   <% end %>