From c749d2ccd70b5053a06573adbe7724e5bc622f39 Mon Sep 17 00:00:00 2001
From: Salih Candir <salih.candir@styleflasher.at>
Date: Wed, 25 Nov 2020 17:51:05 +0100
Subject: [PATCH] search with debounce

---
 package.json                   |  1 +
 src/PlaceAutocompleteField.vue | 23 ++++++++++++++---------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 3b7ea38..5c8deb6 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "release": "npm publish; git add . -A; git commit; git push --tags"
   },
   "dependencies": {
+    "debounce": "^1.2.0",
     "vue": "^2.6.11",
     "vue-interface": "^0.4.52"
   },
diff --git a/src/PlaceAutocompleteField.vue b/src/PlaceAutocompleteField.vue
index fdaf880..81e0156 100644
--- a/src/PlaceAutocompleteField.vue
+++ b/src/PlaceAutocompleteField.vue
@@ -26,6 +26,7 @@ import FormControl from 'vue-interface/src/Mixins/FormControl';
 import FormGroup from 'vue-interface/src/Components/FormGroup';
 import InputField from 'vue-interface/src/Components/InputField';
 import ActivityIndicator from 'vue-interface/src/Components/ActivityIndicator';
+import debounce from "debounce";
 
 const KEYCODE = {
     ESC: 27,
@@ -114,7 +115,7 @@ export default {
         types: {
             type: [Boolean, Array],
             default: false
-        }
+        },
 
     },
 
@@ -146,6 +147,17 @@ export default {
             });
         },
 
+        searchDebounce: debounce(function() {
+            this.search().then(response => {
+                this.predictions = response;
+                this.showPredictions = true;
+            }, error => {
+                if (error) {
+                    this.predictions = false;
+                }
+            });
+        }, 200),
+
         search() {
             return new Promise((resolve, reject) => {
                 if (!this.getInputElement().value) {
@@ -232,14 +244,7 @@ export default {
                 return;
             }
 
-            this.search().then(response => {
-                this.predictions = response;
-                this.showPredictions = true;
-            }, error => {
-                if (error) {
-                    this.predictions = false;
-                }
-            });
+            this.searchDebounce();
         },
 
         onFocus(event) {