diff --git a/src/Bundle/ChillPersonBundle/Resources/public/page/person/suggest-names.js b/src/Bundle/ChillPersonBundle/Resources/public/page/person/suggest-names.js
index fedef3c13..8973d0e6c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/page/person/suggest-names.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/page/person/suggest-names.js
@@ -1,21 +1,17 @@
 function capitalizeFirstLetter(string) {
-    return string.charAt(0).toUpperCase() + string.slice(1);
+    return string.charAt(0).toLocaleUpperCase() + string.slice(1);
 }
 
 window.addEventListener('DOMContentLoaded', function() {
 
     const uri = decodeURI(location.hash.substring(1))
-    // console.log(uri)
     let searchFragments = uri.split(' ')
-    console.log(searchFragments)
     searchFragments = searchFragments.filter((el) => {
         if ( ( el.startsWith("firstname") || el.startsWith("lastname") ) || (el !== '' && !el.startsWith('birthdate') && !el.startsWith('gender') && !el.startsWith('city') && !el.startsWith('phonenumber') && !el.startsWith('@'))) {
             return el
         }
     })
 
-    console.log('after filter', searchFragments)
-
     searchFragments = searchFragments.map((el) => {
         if (el.startsWith("firstname")) {
             return el.slice(10)
@@ -25,34 +21,39 @@ window.addEventListener('DOMContentLoaded', function() {
         return el.replace('\"', '')
     })
 
-    console.log(searchFragments)
-
     if (searchFragments) {
-        const suggestions = searchFragments.map((el) => `<p class="name badge bg-person" style="cursor: pointer; margin-right: 5px;">${capitalizeFirstLetter(el)}</p>`)
-        const suggestFirstName = document.getElementById("suggest-firstname")
-        const suggestLastname = document.getElementById("suggest-lastname")
+        const pre = '<ul class="list-suggest add-items inline">';
+        const after = '</ul>';
 
-        suggestFirstName.innerHTML = suggestions.join(' ');
-        suggestLastname.innerHTML = suggestions.join(' ');
+        document.querySelectorAll('[data-suggest-container]').forEach(function(container) {
+            const suggestions = searchFragments.map((el) => `<li class="suggest-item-name"><span data-suggest-target="${container.dataset.suggestContainer}">${capitalizeFirstLetter(el)}</span></li>`);
+            container.innerHTML = pre + suggestions.join(' ') + after;
+        })
     }
 
-    const tags = document.querySelectorAll('.name')
-
-    tags.forEach((tag) => {
+    const tags = document.querySelectorAll('[data-suggest-target]').forEach((tag) => {
         tag.addEventListener('click', function(e) {
-            const field = e.target.parentElement.id === 'suggest-lastname' ? document.getElementById('lastname-field') : document.getElementById('firstname-field')
-                const suggestion = e.target.parentElement.id === 'suggest-lastname' ? e.target.textContent.toUpperCase() : e.target.textContent
+            const field = document.querySelector(`[name="${e.target.dataset.suggestTarget}"]`);
+            let suggestion = e.target.textContent.trim();
+            switch (field.dataset.suggestTransform) {
+                case 'uppercase_all':
+                   suggestion = suggestion.toLocaleUpperCase();
+                   break;
+                case 'uppercase_first_letter':
+                default:
+                   suggestion = capitalizeFirstLetter(suggestion);
+            }
 
-                if (field.value === '') {
+            if (field.value === '') {
                     field.value = suggestion;
                 } else {
                     field.value = `${field.value} ${suggestion}`
                 }
                 e.target.style.display = "none";
 
-                [...document.querySelectorAll("p")]
+                [...document.querySelectorAll("[data-suggest-target]")]
                     .filter(p => p.textContent.includes(e.target.textContent))
-                    .forEach(p => p.style.display = "none")
+                    .forEach(p => p.remove());
         })
     })
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Person/create.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Person/create.html.twig
index 880fac4fb..70d6a4a8e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Person/create.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Person/create.html.twig
@@ -66,21 +66,29 @@
     <div class="row mb-1" style="display:flex;">
         {{ form_label(form.lastName, 'Last name'|trans) }}
         <div class="col-sm-8">
-        {{ form_widget(form.lastName, { 'id' : 'lastname-field'}) }}
+        {{ form_widget(form.lastName, {'attr': {'data-suggest-transform': 'uppercase_all' } }) }}
         </div>
     </div>
-    <div id="suggest-lastname" class="col-sm-8" style="margin-left: auto;"></div>
+    <div data-suggest-container="{{ form.lastName.vars.full_name|e('html_attr') }}" class="col-sm-8" style="margin-left: auto;"></div>
 
     <div class="row mb-1" style="display:flex;">
         {{ form_label(form.firstName, 'First name'|trans) }}
         <div class="col-sm-8">
-        {{ form_widget(form.firstName, { 'id' : 'firstname-field' }) }}
+        {{ form_widget(form.firstName, {'attr': {'data-suggest-transform': 'uppercase_first_letter' } }) }}
         </div>
     </div>
-    <div id="suggest-firstname" class="col-sm-8" style="margin-left: auto;"></div>
+    <div data-suggest-container="{{ form.firstName.vars.full_name|e('html_attr') }}" class="col-sm-8" style="margin-left: auto;"></div>
 
     {% if form.altNames is defined %}
-        {{ form_widget(form.altNames) }}
+        {% for altName in form.altNames %}
+            <div class="row mb-1" style="display:flex;">
+                {{ form_label(altName) }}
+                <div class="col-sm-8">
+                    {{ form_widget(altName, {'attr': {'data-suggest-transform': 'uppercase_all' } }) }}
+                </div>
+            </div>
+            <div data-suggest-container="{{ altName.vars.full_name|e('html_attr') }}" class="col-sm-8" style="margin-left: auto;"></div>
+        {% endfor %}
     {% endif %}
 
     {{ form_row(form.gender, { 'label' : 'Gender'|trans }) }}