Allow the language selector to detect autonym by exonym

resources/js/Components/LanguageSelector.vue

@@ -39,14 +39,15 @@ import LanguageSelectorOptionsMenu from "./LanguageSelectorOptionsMenu.vue";
 import LanguageSelectorInput from "./LanguageSelectorInput.vue";
 import Language from '../types/Language';
 import closeUrlSvg from '../../img/close.svg';
-
+import axios from 'axios';
 import {ref, computed} from "vue";
 import type {Ref} from 'vue';
 import languageData from "@wikimedia/language-data";
 
 const searchInput: Ref<string> = ref('');
 const highlightedIndex: Ref<number> = ref(-1);
 const closeUrl = ref(closeUrlSvg);
+const apiLanguageCodes = ref(['']);
 
 const input = ref<InstanceType<typeof LanguageSelectorInput> | null>(null);
 
@@ -63,17 +64,32 @@ const languages = computed<Language[]>(() => {
 });
 
 const shownLanguages = computed<Language[]>(() => {
-	return languages.value.filter((language) =>
-		language.code.startsWith(searchInput.value.toLowerCase()) ||
-		language.autonym.toLowerCase().includes(searchInput.value.toLowerCase()),
-	);
+    return languages.value.filter((language) =>
+        language.code.startsWith(searchInput.value.toLowerCase()) ||
+        language.autonym.toLowerCase().includes(searchInput.value.toLowerCase()) ||
+        apiLanguageCodes.value.includes(language.code)
+    )
 });
 
 function onInput(searchedLanguage: string): void {
 	searchInput.value = searchedLanguage;
+    getApiLanguageCodes(searchInput.value);
 	highlightedIndex.value = 0;
 }
 
+async function getApiLanguageCodes(inputValue: string) {
+    return await axios.get(
+        'https://www.wikidata.org/w/api.php?action=languagesearch&format=json&formatversion=2',
+        {
+            params: {
+                search: inputValue,
+                origin: '*' // avoid CORS console errors
+            }
+        }).then((response) => {
+            apiLanguageCodes.value = Object.keys(response.data.languagesearch);
+        });
+}
+
 function onSelect(languageCode: string): void {
 	emit('select', languageCode);
 }