Css Zero Showcase
x
1
2
3
<form data-controller="form" action="/slow_action" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="064ecQb4Fd6pFKGSXwc2s1KG4rOtWBOAkhy8Bu6pRjXpJ8Ec_bY2h5U5uDs3DmjJOIXJsnvYkSKaD5UDOZTqPw" autocomplete="off" />
  <input placeholder="Filter tasks.." autocomplete="off" class="input" data-action="form#search" data-turbo-permanent="true" type="search" name="filter_tasks" id="filter_tasks" />
</form>
1
2
3
<%= form_with url: main_app.slow_action_path, data: { controller: "form" } do |form| %>
  <%= form.search_field :filter_tasks, placeholder: "Filter tasks..", autocomplete: "off", class: "input", data: { action: "form#search", turbo_permanent: true } %>
<% end %>
CSS is not required or multiple files are needed, check the notes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { Controller } from "@hotwired/stimulus"
import debounce from "https://esm.sh/lodash.debounce@4.0.8?standalone"
export default class extends Controller {
  static targets = [ "cancel" ]
  initialize() {
    this.search = debounce(this.search.bind(this), 500)
  }
  submit() {
    this.element.requestSubmit()
  }
  search() {
    this.element.requestSubmit()
  }
  cancel() {
    this.cancelTarget?.click()
  }
  preventAttachment(event) {
    event.preventDefault()
  }
}

No notes provided.