diff --git a/web/src/components/Autocomplete.vue b/web/src/components/Autocomplete.vue
index 19a6256..e35b7ee 100644
--- a/web/src/components/Autocomplete.vue
+++ b/web/src/components/Autocomplete.vue
@@ -6,15 +6,24 @@ interface Suggestion {
     Name : string
 }
 
+interface Data {
+    Selected: Suggestion | undefined
+    SearchQuery: String
+    Suggestions: Suggestion[]
+}
+
 export default defineComponent({
     data() {
         return {
-            SelectedID: "",
+            Selected: undefined,
             SearchQuery: this.modelValue || "",
             Suggestions: new Array<Suggestion>(),
-        }
+        } as Data
+    },
+    props: {
+        modelValue: String, 
+        type: String
     },
-    props: ["modelValue", "type"],
     watch: {
         SearchQuery() {
             this.load(this.$data.SearchQuery);
@@ -24,8 +33,8 @@ export default defineComponent({
         saveTransaction(e : MouseEvent) {
             e.preventDefault();
         },
-        load(text : string) {
-            this.$emit('update:modelValue', text);
+        load(text : String) {
+            this.$emit('update:modelValue', {ID: "", Name: text});
             if (text == ""){
                 this.$data.Suggestions = [];
                 return;
@@ -48,13 +57,14 @@ export default defineComponent({
             let selectedID = "";
             if(valueAttribute != null)
                 selectedID = valueAttribute.value;
-            this.$data.SelectedID = selectedID;
+            const selected = this.$data.Suggestions.filter(x => x.ID == selectedID)[0];
+            this.$data.Selected = selected;
             this.$data.Suggestions = [];
-            this.$emit('update:modelValue', selectedID);
+            this.$emit('update:modelValue', selected);
         },
         clear() {
-            this.$data.SelectedID = "";
-            this.$emit('update:modelValue', this.$data.SearchQuery);
+            this.$data.Selected = undefined;
+            this.$emit('update:modelValue', {ID: "", Name: this.$data.SearchQuery});
         }
     }
 })
@@ -62,8 +72,8 @@ export default defineComponent({
 
 <template>
     <div>
-        <input v-if="SelectedID == ''" v-model="SearchQuery" />
-        <span @click="clear" v-if="SelectedID != ''">Selected: {{SelectedID}}</span>
+        <input v-if="Selected == undefined" v-model="SearchQuery" />
+        <span @click="clear" v-if="Selected != undefined" class="bg-gray-300">{{Selected.Name}}</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="select" :value="suggestion.ID">
                 {{suggestion.Name}}