https://github.com/theforestvn88/rails-select7
Multiple choices selector (similar to select2, but with rails hotwire)
https://github.com/theforestvn88/rails-select7
multiple-choice rails
Last synced: 2 months ago
JSON representation
Multiple choices selector (similar to select2, but with rails hotwire)
- Host: GitHub
- URL: https://github.com/theforestvn88/rails-select7
- Owner: theforestvn88
- License: mit
- Created: 2022-05-06T14:53:28.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-03-23T10:57:16.000Z (over 2 years ago)
- Last Synced: 2026-02-28T18:52:12.523Z (4 months ago)
- Topics: multiple-choice, rails
- Language: Ruby
- Homepage:
- Size: 116 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: MIT-LICENSE
Awesome Lists containing this project
README
# Select7
Multiple choices selector (similar to select2, but with rails hotwire)
## Installation
```ruby
# Gemfile
gem "rails", ">=7.0.0" # require Rails 7+
gem "stimulus-rails" # require stimulus
gem "select7"
# install
$ bundle install
$ rails select7:install
```
## Usage
### Searching with multiple choices
```ruby
<%= form_with(url: search_projects_path) do |f| %>
<%= f.select7(:tags => [:id, :name], options: Tag.all) %>
<%= f.submit %>
<% end %>
# ==> This form will submit with `params[:tag_ids]` contains all ids of the selected tags
```
### In form: one/many-to-many relationship
```ruby
<%= form_with(model: project) do |form| %>
# ...
<%= form.select7(:tags => [:id, :name], options: Tag.all) %>
# ...
<% end %>
# ==> This form will submit with `params[:project][:tag_ids]`
def project_params
params.require(:project).permit(tag_ids: [], )
end
```
### Suggestion for multiple choices selector
In case there're a very large number of choices, instead of query all choices as options for select, you could use a `suggestion`:
```ruby
<%= form_with(model: project) do |form| %>
# ...
# assigned devs
<%= form.select7(:developers => [:id, :name], suggest: { url: search_developers_url(page_size: 10), format: :json }) %>
# ...
<% end %>
# this require an implementation of the suggestion
resources :developers do
get :search, on: :collection
end
class DevelopersController < ApplicationController
# ...
# suggest developers
def search
@developers = Developer.where("name like ?", "%#{params[:name]}%").first(params[:page_size].to_i)
respond_to do |format|
format.json { render json: @developers, layout: false }
end
end
# ...
end
```
### Listening select7 changed events
In case you want to do something with selected options from select7 whenever they're changed, you could listen event `select7-changed@window` from your js file.
For example:
```ruby
<%= select7_tag(:tags => [:id, :name], options: Tag.all) %>
# filter_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
update(e) {
console.log(e.detail)
// field: "tags"
// action: "add"
// changedValue: "3"
// selectedValues: ["1", "3"]
}
}
```