--- a/client/src/application/Topbar.vue	Wed Sep 26 09:49:00 2018 +0200
+++ b/client/src/application/Topbar.vue	Wed Sep 26 11:57:30 2018 +0200
@@ -9,7 +9,7 @@
                     <i class="fa fa-search"></i>
                 </span>
             </div>
-            <input v-if="!searchbarCollapsed" id="search" type="text" class="form-control ui-element search searchbar">
+            <input v-if="!searchbarCollapsed" id="search" v-model="searchQuery" type="text" class="form-control ui-element search searchbar">
         </div>
         <div v-if="routeName == 'mainview'" class="splitbutton">
             <i @click="splitScreen" class="ui-element splitscreen fa fa-window-restore shadow"></i>
@@ -86,6 +86,8 @@
 
 
 <script>
+import debounce from 'lodash.debounce'
+
 import Layers from "../layers/Layers";
 import Identify from "../layers/Identify";
 
@@ -97,10 +99,22 @@
   },
   data() {
     return {
-      searchbarCollapsed: true
+      searchbarCollapsed: true,
+      searchQuery: "",
+      searchQueryIsDirty: false,
+      isSearching: false
     };
   },
   computed: {
+    searchIndicator: function () {
+      if (this.isSearching) {
+        return '⟳';
+      } else if (this.searchQueryIsDirty) {
+        return '';
+      } else {
+        return '✓';
+      }
+    },
     searchbarContainerStyle() {
       return {
         "input-group": true,
@@ -111,7 +125,20 @@
     }
   },
   props: ["routeName"],
+  watch: {
+    searchQuery: function() {
+      this.searchQueryIsDirty = true;
+      this.doSearch();
+    }
+  },
   methods: {
+    doSearch: debounce(function() {
+      this.isCalculating = true;
+      console.log("Would start search of", this.searchQuery);
+      this.isCalculating = false;
+      this.searchQueryIsDirty = false;
+      }, 500
+    ),
     toggleSearchbar() {
       this.searchbarCollapsed = !this.searchbarCollapsed;
     },