Submit and refresh results as you type terms

app/javascript/controllers/form_controller.js

@@ -1,12 +1,30 @@
 import { Controller } from "@hotwired/stimulus"
+import { debounce } from "helpers/timing_helpers";
 
 export default class extends Controller {
   static targets = [ "cancel" ]
 
+  static values = {
+    debounceTimeout: { type: Number, default: 300 }
+  }
+
+  initialize() {
+    this.debouncedSubmit = debounce(this.debouncedSubmit.bind(this), this.debounceTimeoutValue)
+  }
+
   submit() {
     this.element.requestSubmit()
   }
 
+  debouncedSubmit(event) {
+    this.submit(event)
+  }
+
+  submitToTopTarget(event) {
+    this.element.setAttribute("data-turbo-frame", "_top")
+    this.submit()
+  }
+
   cancel() {
     this.cancelTarget?.click()
   }

app/models/filter.rb

@@ -34,7 +34,7 @@ class Filter < ApplicationRecord
       result = result.closed_at_window(closure_window) if closure_window
       result = result.closed_by(closers) if closers.present?
       result = terms.reduce(result) do |result, term|
-        result.similar_to(term)
+        result.mentioning(term)
       end
 
       result

app/models/filter/fields.rb

@@ -47,6 +47,10 @@ module Filter::Fields
     def terms
       Array(super)
     end
+
+    def terms=(value)
+      super(Array(value).filter(&:present?))
+    end
   end
 
   def with(**fields)

app/views/cards/index/_columns.html.erb

@@ -1,11 +1,13 @@
 <% cache @cache_key do %>
-  <div class="card-columns" data-controller="related-element" data-related-element-highlight-class="cards--related">
-    <% unless user_filtering.only_closed? %>
-      <%= render "cards/index/engagement/on_deck", user_filtering: user_filtering, **on_deck.to_h %>
-      <%= render "cards/index/engagement/considering", user_filtering: user_filtering, **considering.to_h %>
-      <%= render "cards/index/engagement/doing", user_filtering: user_filtering, **doing.to_h %>
-    <% end %>
-  </div>
+  <%= turbo_frame_tag :card_columns do %>
+    <div class="card-columns" data-controller="related-element" data-related-element-highlight-class="cards--related">
+      <% unless user_filtering.only_closed? %>
+        <%= render "cards/index/engagement/on_deck", user_filtering: user_filtering, **on_deck.to_h %>
+        <%= render "cards/index/engagement/considering", user_filtering: user_filtering, **considering.to_h %>
+        <%= render "cards/index/engagement/doing", user_filtering: user_filtering, **doing.to_h %>
+      <% end %>
+    </div>
 
-  <%= render "cards/index/engagement/closed", user_filtering: user_filtering, **closed.to_h %>
+    <%= render "cards/index/engagement/closed", user_filtering: user_filtering, **closed.to_h %>
+  <% end %>
 <% end %>

app/views/filters/settings/_terms.html.erb

@@ -1,5 +1,5 @@
 <% filter = user_filtering.filter %>
-<%= form_with url: cards_path, method: :get, class: "", data: { controller: "form" } do |form| %>
+<%= form_with url: cards_path, method: :get, class: "", data: { controller: "form", turbo_frame: "card_columns", action: "input->form#debouncedSubmit" } do |form| %>
   <% filter.as_params.except(:terms).each do |key, value| %>
     <%= filter_hidden_field_tag key, value %>
   <% end %>
@@ -12,8 +12,8 @@
     <%= hidden_field_tag :expand_all, user_filtering.expanded? %>
   <% end %>
 
-  <%= form.text_field "terms[]", placeholder: "Filter these cards…", class: "input txt-x-small filter__terms", 
-        autofocus: false, autocomplete: :off, autocorrect: "off", data: { "1p-ignore": "true" } %>
+  <%= form.text_field "terms[]", placeholder: "Filter these cards…", class: "input txt-x-small filter__terms",
+        autofocus: false, autocomplete: :off, autocorrect: "off", data: { "1p-ignore": "true", action: "keydown.enter->form#submitToTopTarget" } %>
 <% end %>
 
 <% if filter.terms.present? %>