Try to implement autocomplete for payees

web/src/pages/Account.vue

@@ -6,12 +6,27 @@ export default defineComponent({
         return {
             TransactionDate: new Date().toISOString().substring(0, 10),
             Payee: "",
+            SearchPayees: null,
+            Category: "",
+            Memo: "",
+            Amount: 0
         }
     },
     props: ["budgetid", "accountid"],
+    watch: {
+        SearchPayees() {
+            GetPayees(this.$data.SearchPayees);
+        }
+    },
     methods: {
         saveTransaction(e : MouseEvent) {
             e.preventDefault();
+        },
+        GetPayees() {
+           fetch("/api/v1/budget/" + this.$store.getters.CurrentBudget.ID + "/autocomplete/payees?s=" + this.$data.SearchPayees, {
+               headers: this.$store.getters.AuthHeaders
+           }) .then(x=>x.json())
+           .then(x => console.log(x));
         }
     }
 })
@@ -32,16 +47,17 @@ export default defineComponent({
                     <input type="date" v-model="TransactionDate" />
                 </td>
                 <td style="max-width: 150px;">
-                    <input type="text" v-model="Payee" />
+                    <!--<v-autocomplete v-model="Payee" :loading="PayeesLoading" :search-input.sync="SearchPayees" label="Select payee" />-->
+                    <input @change="GetPayees" v-model="SearchPayees" />
                 </td>
                 <td style="max-width: 200px;">
-                    <input type="text" />
+                    <input type="text" v-model="Category" />
                 </td>
                 <td>
-                    <input type="text" />
+                    <input type="text" v-model="Memo" />
                 </td>
                 <td style="width: 80px;">
-                    <input type="number" />
+                    <input type="currency" v-model="Amount" />
                 </td>
                 <td style="width: 20px;">
                     <input type="submit" @click="saveTransaction" value="ι" />