OER-Campus: Fixes for Quicksearch Vue component

Index: resources/vue/components/Quicksearch.vue
===================================================================
--- resources/vue/components/Quicksearch.vue	(revision 61227)
+++ resources/vue/components/Quicksearch.vue	(working copy)
@@ -2,13 +2,12 @@
     <span :class="'quicksearch_container' + (containerclass ? ' ' + containerclass : '')">
         <input type="hidden"
                :name="name"
-               :value="value"
+               :value="returnValue"
                v-if="!autocomplete">
         <input type="text"
                :name="autocomplete ? name : null"
-               :value="autocomplete ? value : needle"
+               v-model="inputValue"
                autocomplete="off"
-               @input="search"
                @blur="reset"
                @keydown.up="selectUp"
                @keydown.down="selectDown"
@@ -69,62 +68,52 @@
             debounceTimeout: null,
             selected: null,
             results: [],
-            errorMessage: null
+            errorMessage: null,
+            inputValue: this.autocomplete ? this.value : this.needle,
+            returnValue: this.autocomplete ? this.value : this.needle
         };
     },
     methods: {
-        search (event) {
-            let searchtext = event.target.value;
-            let v = this;
-            if (this.autocomplete) {
-                v.value = searchtext;
-            } else {
-                v.needle = searchtext;
-            }
-            this.$emit('input', searchtext);
+        search (needle) {
+            this.$emit('input', needle);
+
             clearTimeout(this.debounceTimeout);
             this.debounceTimeout = setTimeout(() => {
-                if (searchtext.length > 2) {
+                let data = []
+                if ($(this.$el).closest("form").length > 0) {
+                    data = $(this.$el).closest("form").serializeArray();
+                }
+                data.push({
+                    name: "request",
+                    value: needle
+                });
 
-                    let data = []
-                    if ($(event.target).closest("form").length > 0) {
-                        data = $(event.target)
-                            .closest("form")
-                            .serializeArray();
-                    }
-                    data.push({
-                        name: "request",
-                        value: searchtext
-                    });
+                $.post(
+                    STUDIP.URLHelper.getURL("dispatch.php/quicksearch/response/" + this.searchtype),
+                    data
+                ).done(response => {
+                    this.selected = null;
+                    this.results = response;
+                    this.errorMessage = null;
+                }).fail(response => {
+                    this.errorMessage = response.responseText;
+                }).always(() => {
+                    this.searching = false;
+                });
 
-                    $.ajax({
-                        url: STUDIP.URLHelper.getURL("dispatch.php/quicksearch/response/" + v.searchtype),
-                        data: data,
-                        type: "post",
-                        success: function (response) {
-                            v.selected = null;
-                            v.results = response;
-                            v.searching = false;
-                            v.errorMessage = null;
-                        },
-                        error: function (response) {
-                            v.errorMessage = response.responseText;
-                        }
-                    });
-                    this.searching = true;
-                }
+                this.searching = true;
             }, 500);
         },
         select (result) {
-            this.results = [];
-            this.needle = result.item_search_name;
-            let v = this;
+            this.inputValue = result.item_search_name;
             if (this.autocomplete) {
-                this.value = result.item_search_name;
+                this.returnValue = result.item_search_name;
             } else {
-                this.value = result.item_id;
+                this.returnValue = result.item_id;
             }
-            this.$emit('select', result);
+            this.results = [];
+
+            this.$emit('select', this.returnValue);
         },
         selectUp () {
             if (this.selected > 0) {
@@ -151,8 +140,10 @@
             return false;
         },
         reset () {
-            this.results = [];
-            this.selected = null;
+            setTimeout(() => {
+                this.results = [];
+                this.selected = null;
+            }, 300);
         }
     },
     computed: {
@@ -159,6 +150,13 @@
         isVisible() {
             return this.results.length > 0 || this.errorMessage !== null;
         }
+    },
+    watch: {
+        inputValue (needle) {
+            if (needle.length > 2) {
+                this.search(needle);
+            }
+        }
     }
 }
 </script>