Add institution picker for organization tab

Lets users choose their organization using our list and ror query
when they set the author type to "Organization".

metadata-generator.html

@@ -495,9 +495,11 @@
     const creatorList = document.getElementById("creator-list");
     const item = document.createElement("li");
     item.setAttribute("class", "list-group-item");
-    let institutionOptions = ""
+    let institutionOptions = "";
+    let organizationOptions = "";
     $.each(vocabInstitutions, function (i, item) {
       institutionOptions += '<option value="' + item["ror"] + '"' + (item["ror"] === institution ? ' selected' : '') + '>' + item["label"] + '</option>';
+      organizationOptions += '<option value="' + item["ror"] + '"' + (item["ror"] === institution ? ' selected' : '') + '>' + item["label"] + '</option>';
     });
     let customInstitutionSelected = institution === "" && affiliationName !== "";
     let radioGroupName = creatorList.childElementCount > 1 ? $(creatorList.lastElementChild.previousElementSibling).find('.inputType').find('input').attr('name') : ''
@@ -554,10 +556,11 @@
       </div>
     </div>
     <div class="form-row mt-3 organization-element" ${type !== "Organization" ? 'style="display:none;"':''}>
-      <div class="col">
+      <div class="col mb-1" id="select-div">
-        <input type="text" class="form-control inputOrganizationName" placeholder="Name" data-i18n-placeholder="LABEL_ORGANIZATION_NAME" value="${organizationName}" required>
+        <select data-style="input-dropdown" data-width="100%" class="form-select inputOrganizationName select-organization" id="organization-select">
-          <div class="valid-feedback"></div>
+          <option value="" data-i18n="LABEL_ORGANIZATION_CHOOSE" ${institution === "" ? "selected":""}></option>
-          <div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
+          ${organizationOptions}
+        </select>
       </div>
     </div>
     <div class="form-row mt-2">
@@ -568,7 +571,8 @@
     `;
 
     creatorList.insertBefore(item, creatorList.lastElementChild);
-    createOrUpdateSelect2();
+    createOrUpdateSelectInputAffiliation();
+    createOrUpdateSelectOrganization();
     createOrUpdateDatePicker();
     updateContent();
   }
@@ -584,8 +588,10 @@
       const typeElement = creatorsElement[i].getElementsByClassName("inputType")[0];
       const type = $(typeElement).find('input:radio:checked').val()
       if (type === "Organization") {
+        const organizationInput = creatorsElement[i].querySelector("select.inputOrganizationName");
         creators.push({
-          name: creatorsElement[i].getElementsByClassName("inputOrganizationName")[0].value.trim(),
+          name: organizationInput.options[organizationInput.selectedIndex].innerHTML,
+          id: organizationInput.value,
           type: "Organization"
         });
       } else {
@@ -686,7 +692,8 @@
     }
     for (let i = 0; i < creators.length; i++) {
       if (creators[i].type === "Organization") {
-        addCreator("", "", "", "", creators[i].name, "Organization");
+        const ror = creators[i].id ? creators[i].id : "";
+        addCreator("", "", "", ror, creators[i].name, "Organization");
       } else {
         const firstName = creators[i].givenName ? creators[i].givenName : creators[i].name.split(" ")[0];
         const lastName = creators[i].familyName ? creators[i].familyName: creators[i].name.substring(creators[i].name.indexOf(" ") + 1);
@@ -812,11 +819,58 @@
   function changeLanguage(languageCode) {
     i18next.changeLanguage(languageCode);
     document.getElementById("selectedLanguageLabel").textContent = languageCode.toUpperCase();
-    createOrUpdateSelect2();
+    createOrUpdateSelectInputAffiliation();
+    createOrUpdateSelectOrganization();
     createOrUpdateDatePicker();
   }
 
-  function createOrUpdateSelect2() {
+  function createOrUpdateSelectOrganization() {
+    $('.select-organization').select2({
+      language: {
+        noResults: () => i18next.t("LABEL_NO_INSTITUTION_FOUND")
+      },
+      placeholder: i18next.t("LABEL_ORGANIZATION_CHOOSE"),
+      theme: "bootstrap",
+      ajax: {
+        url: 'https://api.ror.org/organizations?query=',
+        data: function (params) {
+          return {
+            query: params.term,
+            filter: "types:Education"
+          }
+        },
+        processResults: function (data, params) {
+          let results = [];
+
+          if (params.term) {
+            let localInstitutions = vocabInstitutions.map(institution => ({"name": institution["label"], "id": institution["ror"]}));
+            let rorInstitutions = data["items"].map(institution => ({"name": institution.name, "id": institution.id}));
+
+            let matchedLocalInstitutions = localInstitutions.filter(function(item) {
+              return item.name.toLowerCase().includes(params.term.toLowerCase());
+            });
+
+            let filteredRorInstitutions = rorInstitutions.filter(function(item) {
+              return !matchedLocalInstitutions.find(value => value.id == item.id);
+            });
+
+            results = [...matchedLocalInstitutions, ...filteredRorInstitutions];
+          }
+
+          return {
+            results: $.map(results, function(item) {
+              return {
+                text: item.name,
+                id: item.id
+              }
+            })
+          }
+        }
+      }
+    });
+  }
+
+  function createOrUpdateSelectInputAffiliation() {
     $('.select-institution').select2({
       language: {
         noResults: () => i18next.t("LABEL_NO_INSTITUTION_FOUND")