Implement custom autocomplete component

web/src/components/Autocomplete.vue

@@ -0,0 +1,73 @@
+<script lang="ts">
+import { defineComponent } from "vue"
+
+interface Payee {
+    ID : string
+    Name : string
+}
+
+export default defineComponent({
+    data() {
+        return {
+            SelectedID: "",
+            SearchQuery: this.modelValue || "",
+            Suggestions: new Array<Payee>(),
+        }
+    },
+    props: ["modelValue"],
+    watch: {
+        SearchQuery() {
+            this.LoadSuggestions(this.$data.SearchQuery);
+        }
+    },
+    methods: {
+        saveTransaction(e : MouseEvent) {
+            e.preventDefault();
+        },
+        LoadSuggestions(text : string) {
+            this.$emit('update:modelValue', text);
+            if (text == ""){
+                this.$data.Suggestions = [];
+                return;
+            }
+            
+            fetch("/api/v1/budget/" + this.$store.getters.CurrentBudget.ID + "/autocomplete/payees?s=" + text, {
+                headers: this.$store.getters.AuthHeaders
+            }) .then(x=>x.json())
+            .then(x => {
+                let payees = x || [];
+                if(payees.length > 10){
+                    payees = payees.slice(0, 10);
+                }
+                this.$data.Suggestions = payees;
+            });
+        },
+        selectSuggestion(e : MouseEvent) {
+            const target = (<HTMLInputElement>e.target);
+            const valueAttribute = target.attributes.getNamedItem("value");
+            let selectedID = "";
+            if(valueAttribute != null)
+                selectedID = valueAttribute.value;
+            this.$data.SelectedID = selectedID;
+            this.$data.Suggestions = [];
+            this.$emit('update:modelValue', selectedID);
+        },
+        clearPayee() {
+            this.$data.SelectedID = "";
+            this.$emit('update:modelValue', this.$data.SearchQuery);
+        }
+    }
+})
+</script>
+
+<template>
+    <div>
+        <input v-if="SelectedID == ''" v-model="SearchQuery" />
+        <span @click="clearPayee" v-if="SelectedID != ''">Selected: {{SelectedID}}</span>
+        <div v-if="Suggestions.length > 0" class="absolute bg-gray-400 w-64 p-2">
+            <span v-for="suggestion in Suggestions" class="block" @click="selectSuggestion" :value="suggestion.ID">
+                {{suggestion.Name}}
+            </span>
+        </div>
+    </div>
+</template>

web/src/pages/Account.vue

@@ -1,58 +1,28 @@
 <script lang="ts">
 import { defineComponent } from "vue"
-
+import Autocomplete from '../components/Autocomplete.vue'
-interface Payee {
-    ID : string
-    Name : string
-}
 
 export default defineComponent({
     data() {
         return {
             TransactionDate: new Date().toISOString().substring(0, 10),
-            PayeeID: "",
+            Payee: "",
-            SearchPayees: "",
-            Payees: new Array<Payee>(),
             Category: "",
             Memo: "",
             Amount: 0
         }
     },
+    components: { Autocomplete },
     props: ["budgetid", "accountid"],
     watch: {
-        SearchPayees() {
+        Payee() {
-            this.GetPayees(this.$data.SearchPayees);
+            console.log(this.$data.Payee);
         }
     },
     methods: {
         saveTransaction(e : MouseEvent) {
             e.preventDefault();
         },
-        GetPayees(text : string) {
-            if (text == ""){
-                this.$data.Payees = [];
-                return;
-            }
-
-           fetch("/api/v1/budget/" + this.$store.getters.CurrentBudget.ID + "/autocomplete/payees?s=" + text, {
-               headers: this.$store.getters.AuthHeaders
-           }) .then(x=>x.json())
-           .then(x => {
-               let payees = x || [];
-               if(payees.length > 10){
-                   payees = payees.slice(0, 10);
-               }
-               this.$data.Payees = payees;
-               console.log(x);
-           });
-        },
-        selectPayee(e : MouseEvent) {
-            this.$data.PayeeID = e.target.attributes.value.nodeValue;
-            this.$data.Payees = [];
-        },
-        clearPayee() {
-            this.$data.PayeeID = "";
-        }
     }
 })
 </script>
@@ -71,14 +41,7 @@ export default defineComponent({
                     <input type="date" v-model="TransactionDate" />
                 </td>
                 <td style="max-width: 150px;">
-                    <!--<v-autocomplete v-model="Payee" :loading="PayeesLoading" :search-input.sync="SearchPayees" label="Select payee" />-->
+                    <Autocomplete v-model="Payee" />
-                    <input v-if="PayeeID == ''" v-model="SearchPayees" />
-                    <span @click="clearPayee" v-if="PayeeID != ''">Selected: {{PayeeID}}</span>
-                    <div v-if="Payees.length > 0" class="absolute bg-gray-400 w-64 p-2">
-                        <span v-for="payee in Payees" class="block" @click="selectPayee" :value="payee.ID">
-                            {{payee.Name}}
-                        </span>
-                    </div>
                 </td>
                 <td style="max-width: 200px;">
                     <input type="text" v-model="Category" />