search on input

src/components/scroll-table.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="Scroll-Table">
-        <my-input :props="{type: 'text', placeholder: 'Suche'}" @change="searchChanged" v-model="currentSearch"></my-input>
+        <my-input :props="{type: 'text', placeholder: 'Suche'}" @input="searchChanged" v-model="currentSearch"></my-input>
         <my-table :actions="actions" :columns="columns" :rows="rows"
           :currentOrderBy="currentOrderBy"
           :currentOrderDesc="currentOrderDesc"
@@ -18,6 +18,7 @@ import MyTable from 'components/my-table';
 import MyInput from 'components/my-input';
 
 import { ObserveVisibility } from 'vue-observe-visibility/dist/vue-observe-visibility';
+import { debounce } from 'lib/util';
 
 export default {
     name: "ScrollTable",
@@ -141,11 +142,11 @@ export default {
             this.reloadTriggered = true;
             this.clear();
         },
-        searchChanged(e) {
+        searchChanged: debounce(function(e) {
             this.currentSearch = e;
             this.reloadTriggered = true;
             this.clear();
-        }
+        }, 300)
     }
 }
 </script>

src/lib/util.js

@@ -0,0 +1,36 @@
+
+const now = Date.now || function() {
+    return new Date().getTime();
+};
+
+export function debounce(func, wait, immediate) {
+    var timeout, args, context, timestamp, result;
+
+    var later = function() {
+        var last = now() - timestamp;
+
+        if (last < wait && last >= 0) {
+            timeout = setTimeout(later, wait - last);
+        } else {
+            timeout = null;
+            if (!immediate) {
+                result = func.apply(context, args);
+                if (!timeout) context = args = null;
+            }
+        }
+    };
+
+    return function() {
+        context = this;
+        args = arguments;
+        timestamp = now();
+        var callNow = immediate && !timeout;
+        if (!timeout) timeout = setTimeout(later, wait);
+        if (callNow) {
+            result = func.apply(context, args);
+            context = args = null;
+        }
+
+        return result;
+    };
+}