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

tailbone/templates/grids/filters_buefy.mako

@@ -18,18 +18,29 @@
       Apply Filters
     </b-button>
 
-    <b-select @input="addFilter"
+    <b-button v-if="!addFilterShow"
+              icon-pack="fas"
+              icon-left="plus"
+              class="control"
+              @click="addFilterButton">
+      Add Filter
+    </b-button>
+
+    <b-autocomplete v-if="addFilterShow"
+                    ref="addFilterAutocomplete"
+                    :data="addFilterChoices"
+                    v-model="addFilterTerm"
                     placeholder="Add Filter"
-              v-model="selectedFilter">
-      <option v-for="key in filtersSequence"
-              :key="key"
-              :value="key"
-              ## TODO: previous code here was simpler; trying to track down
-              ## why disabled options don't appear so on Windows Chrome (?)
-              :disabled="filters[key].visible ? 'disabled' : null">
-        {{ filters[key].label }}
-      </option>
-    </b-select>
+                    field="key"
+                    :custom-formatter="filtr => filtr.label"
+                    open-on-focus
+                    keep-first
+                    icon-pack="fas"
+                    clearable
+                    clear-on-select
+                    @select="addFilterSelect"
+                    @keydown.native="addFilterKeydown">
+    </b-autocomplete>
 
     <b-button @click="resetView()"
               icon-pack="fas"