Purpose: Automatically submits forms when input values change, with configurable debouncing to prevent excessive submissions.

Features

• Configurable debounce delay
• Support for specific form targeting
• Automatic cleanup of timeouts
• Works with any form input events

Static Values

static values = {
  delay: { type: Number, default: 150 } // Debounce delay in milliseconds
}

Actions

• submit: Trigger form submission (with debouncing)

Usage Examples

Basic Auto-Submit Form

<%= form_with model: @search, local: true, data: { controller: "fx-auto-submit" } do |f| %>
  <%= f.text_field :query,
      placeholder: "Search...",
      data: { action: "input->fx-auto-submit#submit" } %>
  <%= f.select :category, options_for_select([...]),
      data: { action: "change->fx-auto-submit#submit" } %>
<% end %>

Custom Delay Configuration

<%= form_with model: @filter, local: true,
    data: {
      controller: "fx-auto-submit",
      "fx-auto-submit-delay-value": 500
    } do |f| %>
  <%= f.text_field :name, data: { action: "input->fx-auto-submit#submit" } %>
  <%= f.range_field :price, data: { action: "input->fx-auto-submit#submit" } %>
<% end %>

External Form Targeting

<%= form_with id: "search-form", model: @search, local: true do |f| %>
  <%= f.text_field :query %>
<% end %>

<div data-controller="fx-auto-submit">
  <input type="text"
         data-action="input->fx-auto-submit#submit"
         data-fx-auto-submit-form-id-param="search-form">
</div>