funicular-autocomplete

An incremental-search combobox component for Funicular, packaged as a plugin gem.

Installation

# Gemfile
group :funicular do
  gem "funicular-autocomplete"
end

The component sources are prepended to your client bundle by funicular:compile, and funicular_plugin_include_tags serves the stylesheet.

Usage

component Funicular::Plugins::Autocomplete::Component,
          key: "brewery-#{record_id}",
          options: [{ "id" => 1, "label" => "Masuizumi" }],
          value: selected_id,
          input_id: "brewery-search",
          input_class: "border rounded px-3 py-2",
          placeholder: "Search breweries...",
          on_select: ->(option) { @brewery_id = option["id"] }
  • options — Array of Hashes with "id" and "label"; the parent owns the list. Filtering is a case-insensitive substring match on "label".
  • value — optional preselected id, read once at mount to prefill the input. Give the component a key that changes when the selection context changes so it remounts.
  • on_select — called with the chosen option Hash.
  • Keyboard: ArrowDown / ArrowUp move the highlight (opening the panel if closed), Enter selects the highlighted match, Escape closes. Mouse selection uses mousedown so it wins over the input's blur.
  • limit (default 20), empty_label, placeholder, input_id, input_class — presentation knobs.

Test

bundle install && npm install
bundle exec rake test