Use ROR API to search through institutions

i18n/de.json

@@ -43,5 +43,6 @@
   "LABEL_TITLE": "Titel",
   "LABEL_URL": "URL der Ressource",
   "LABEL_URL_PLACEHOLDER": "Direktlink zur Resource (Voreinstellung GitHub/GitLab Pages URL)",
-  "LABEL_YAML_METADATA": "YAML Metadaten"
+  "LABEL_YAML_METADATA": "YAML Metadaten",
+  "LABEL_NO_INSTITUTION_FOUND": "Keine passende Institution gefunden"
 }

i18n/en.json

@@ -43,5 +43,6 @@
   "LABEL_TITLE": "Title",
   "LABEL_URL": "Resource URL",
   "LABEL_URL_PLACEHOLDER": "Direct link to the resource (default GitHub/GitLab Pages URL)",
-  "LABEL_YAML_METADATA": "YAML Metadata"
+  "LABEL_YAML_METADATA": "YAML Metadata",
+  "LABEL_NO_INSTITUTION_FOUND": "No matching institution found"
 }

metadata-generator.html

@@ -12,6 +12,11 @@
   <!-- Latest compiled and minified CSS -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css"/>
 
+  <!-- jQuery Select2 -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css"/>
+
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
 
   <!-- Latest compiled and minified JavaScript -->
@@ -511,17 +516,20 @@
         <input type="text" class="form-control inputAuthorId" placeholder="Persönliche ID (optional, wie ORCID, GND)" data-i18n-placeholder="LABEL_CREATOR_ID" value="${authorId}">
       </div>
     </div>
+
     <div class="form-row mt-2 person-element" ${type !== "Person" ? 'style="display:none;"':''}>
       <div class="col-1 m-auto" style="flex-basis: content">
         <input class="affiliationType" type="radio" name="institution_${radioGroupName}" aria-label="radio button for institution list" ${customInstitutionSelected ? "":"checked"} value="standard" onclick="changeAffiliationType(this.parentNode.parentNode.parentNode, 'standard')">
       </div>
-      <div class="col-11">
+      
-        <select ${customInstitutionSelected ? "disabled":""} data-style="input-dropdown" data-width="100%" class="selectpicker inputAffiliation" data-live-search="true">
+      <div class="col-11 mb-1" id="select-div">
-          <option value="" data-i18n="LABEL_ORGANIZATION_CHOOSE" ${institution === "" ? "selected":""}>Wähle Institution ...</option>
+        <select ${customInstitutionSelected ? "disabled":""} data-style="input-dropdown" data-width="100%" class="form-select inputAffiliation select-institution" id="institution-select">
+          <option value="" data-i18n="LABEL_ORGANIZATION_CHOOSE" ${institution === "" ? "selected":""}></option>
           ${institutionOptions}
         </select>
       </div>
     </div>
+    
     <div class="form-row person-element" ${type !== "Person" ? 'style="display:none;"':''}>
       <div class="col-1 m-auto" style="flex-basis: content">
         <input class="affiliationType" type="radio" name="institution_${radioGroupName}" aria-label="radio button for custom institution" ${customInstitutionSelected ? "checked":""} value="custom" onclick="changeAffiliationType(this.parentNode.parentNode.parentNode, 'custom')">
@@ -545,6 +553,7 @@
     `;
 
     creatorList.insertBefore(item, creatorList.lastElementChild);
+    createOrUpdateSelect2();
     updateContent();
   }
 
@@ -779,6 +788,53 @@
   function changeLanguage(languageCode) {
     i18next.changeLanguage(languageCode);
     document.getElementById("selectedLanguageLabel").textContent = languageCode.toUpperCase();
+    createOrUpdateSelect2();
+  }
+
+  function createOrUpdateSelect2() {
+    $('.select-institution').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 updateContent() {