updated elastic autocomplete to include persons, also adds debounce & clearer handling of response

src/components/header/SearchInput.vue

@@ -42,6 +42,18 @@
   </div>
 </template>
 
+<!-- Handles constructing markup and state for dropdown.
+
+Markup:
+Consist of: search icon, input & close button.
+
+State:
+State is passing input variable `query` to dropdown and carrying state
+of selected dropdown element as variable `index`. This is because
+index is manipulated based on arrow key events from same input as
+the `query`.
+-->
+
 <script setup lang="ts">
   import { ref, computed } from "vue";
   import { useStore } from "vuex";
@@ -51,6 +63,7 @@
   import IconClose from "@/icons/IconClose.vue";
   import type { Ref } from "vue";
   import type { MediaTypes } from "../../interfaces/IList";
+import { IAutocompleteResult } from "../../interfaces/IAutocompleteSearch";
 
   interface ISearchResult {
     title: string;
@@ -66,7 +79,7 @@
   const query: Ref<string> = ref(null);
   const disabled: Ref<boolean> = ref(false);
   const dropdownIndex: Ref<number> = ref(-1);
-  const dropdownResults: Ref<ISearchResult[]> = ref([]);
+  const dropdownResults: Ref<IAutocompleteResult[]> = ref([]);
   const inputIsActive: Ref<boolean> = ref(false);
   const inputElement: Ref<HTMLInputElement> = ref(null);
 
@@ -85,8 +98,13 @@
     query.value = decodeURIComponent(params.get("query"));
   }
 
-  const { ELASTIC } = process.env;
-  if (ELASTIC === undefined || ELASTIC === "") {
+  const { ELASTIC, ELASTIC_APIKEY } = process.env;
+  if (
+    ELASTIC === undefined ||
+    ELASTIC === "" ||
+    ELASTIC_APIKEY === undefined ||
+    ELASTIC_APIKEY === ""
+  ) {
     disabled.value = true;
   }
 
@@ -145,6 +163,7 @@
   function handleSubmit() {
     if (!query.value || query.value.length === 0) return;
 
+    // if index is set, navigation has happened. Open popup else search
     if (dropdownIndex.value >= 0) {
       const resultItem = dropdownResults.value[dropdownIndex.value];