Use autocomplete instead of dropdown for grid "add filter"

tailbone/templates/grids/buefy.mako

@@ -358,7 +358,6 @@
 
   let ${grid.component_studly}Data = {
       loading: false,
-      selectedFilter: null,
       ajaxDataUrl: ${json.dumps(grid.ajax_data_url)|n},
 
       data: ${grid.component_studly}CurrentData,
@@ -401,7 +400,8 @@
       ## filterable: ${json.dumps(grid.filterable)|n},
       filters: ${json.dumps(filters_data if grid.filterable else None)|n},
       filtersSequence: ${json.dumps(filters_sequence if grid.filterable else None)|n},
-      selectedFilter: null,
+      addFilterTerm: '',
+      addFilterShow: false,
 
       ## dummy input value needed for sharing links on *insecure* sites
       % if request.scheme == 'http':
@@ -420,6 +420,39 @@
 
       computed: {
 
+          addFilterChoices() {
+
+              // collect all filters, which are *not* already shown
+              let choices = []
+              for (let field of this.filtersSequence) {
+                  let filtr = this.filters[field]
+                  if (!filtr.visible) {
+                      choices.push(filtr)
+                  }
+              }
+
+              // parse list of search terms
+              let terms = []
+              for (let term of this.addFilterTerm.toLowerCase().split(' ')) {
+                  term = term.trim()
+                  if (term) {
+                      terms.push(term)
+                  }
+              }
+
+              // only filters matching all search terms are presented
+              // as choices to the user
+              return choices.filter(option => {
+                  let label = option.label.toLowerCase()
+                  for (let term of terms) {
+                      if (label.indexOf(term) < 0) {
+                          return false
+                      }
+                  }
+                  return true
+              })
+          },
+
           // note, can use this with v-model for hidden 'uuids' fields
           selected_uuids: function() {
               return this.checkedRowUUIDs().join(',')
@@ -644,12 +677,29 @@
               location.href = url
           },
 
-          addFilter(filter_key) {
-
-              // reset dropdown so user again sees "Add Filter" placeholder
-              this.$nextTick(function() {
-                  this.selectedFilter = null
+          addFilterButton(event) {
+              this.addFilterShow = true
+              this.$nextTick(() => {
+                  this.$refs.addFilterAutocomplete.focus()
               })
+          },
+
+          addFilterKeydown(event) {
+
+              // ESC will clear searchbox
+              if (event.which == 27) {
+                  this.addFilterTerm = ''
+                  this.addFilterShow = false
+              }
+          },
+
+          addFilterSelect(filtr) {
+              this.addFilter(filtr.key)
+              this.addFilterTerm = ''
+              this.addFilterShow = false
+          },
+
+          addFilter(filter_key) {
 
               // show corresponding grid filter
               this.filters[filter_key].visible = true