{"id":20171019,"url":"https://github.com/theforestvn88/rails-select7","last_synced_at":"2026-04-18T05:31:53.201Z","repository":{"id":225797685,"uuid":"489393416","full_name":"theforestvn88/rails-select7","owner":"theforestvn88","description":"Multiple choices selector (similar to select2, but with rails hotwire)","archived":false,"fork":false,"pushed_at":"2024-03-23T10:57:16.000Z","size":119,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-28T18:52:12.523Z","etag":null,"topics":["multiple-choice","rails"],"latest_commit_sha":null,"homepage":"","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/theforestvn88.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"MIT-LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-06T14:53:28.000Z","updated_at":"2024-04-07T10:40:30.000Z","dependencies_parsed_at":"2024-11-14T01:23:11.748Z","dependency_job_id":"99fd4164-9bf0-4fc6-95d4-312cc9d4a6a2","html_url":"https://github.com/theforestvn88/rails-select7","commit_stats":null,"previous_names":["theforestvn88/rails-select7"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/theforestvn88/rails-select7","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theforestvn88%2Frails-select7","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theforestvn88%2Frails-select7/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theforestvn88%2Frails-select7/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theforestvn88%2Frails-select7/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theforestvn88","download_url":"https://codeload.github.com/theforestvn88/rails-select7/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theforestvn88%2Frails-select7/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31957547,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"online","status_checked_at":"2026-04-18T02:00:07.018Z","response_time":103,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["multiple-choice","rails"],"created_at":"2024-11-14T01:22:53.403Z","updated_at":"2026-04-18T05:31:53.181Z","avatar_url":"https://github.com/theforestvn88.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Select7\nMultiple choices selector (similar to select2, but with rails hotwire)\n![search with multiple tag](/search.PNG)\n\n## Installation\n\n```ruby\n# Gemfile\ngem \"rails\", \"\u003e=7.0.0\" # require Rails 7+\ngem \"stimulus-rails\"   # require stimulus\ngem \"select7\"\n\n# install\n$ bundle install\n$ rails select7:install\n```\n\n## Usage\n\n### Searching with multiple choices\n\n```ruby\n\u003c%= form_with(url: search_projects_path) do |f| %\u003e\n  \u003c%= f.select7(:tags =\u003e [:id, :name], options: Tag.all) %\u003e\n  \u003c%= f.submit %\u003e\n\u003c% end %\u003e\n\n# ==\u003e This form will submit with `params[:tag_ids]` contains all ids of the selected tags\n```\n\n### In form: one/many-to-many relationship\n\n```ruby\n\u003c%= form_with(model: project) do |form| %\u003e\n    # ...\n    \u003c%= form.select7(:tags =\u003e [:id, :name], options: Tag.all) %\u003e\n    # ...\n\u003c% end %\u003e\n\n# ==\u003e This form will submit with `params[:project][:tag_ids]`\ndef project_params\n    params.require(:project).permit(tag_ids: [], )\nend\n```\n\n### Suggestion for multiple choices selector\n\nIn case there're a very large number of choices, instead of query all choices as options for select, you could use a `suggestion`:\n\n```ruby\n\u003c%= form_with(model: project) do |form| %\u003e\n    # ...\n    # assigned devs\n    \u003c%= form.select7(:developers =\u003e [:id, :name], suggest: { url: search_developers_url(page_size: 10), format: :json }) %\u003e\n    # ...\n\u003c% end %\u003e\n\n# this require an implementation of the suggestion\nresources :developers do\n    get :search, on: :collection\nend\n\nclass DevelopersController \u003c ApplicationController\n    # ...\n    # suggest developers\n    def search\n        @developers = Developer.where(\"name like ?\", \"%#{params[:name]}%\").first(params[:page_size].to_i)\n        respond_to do |format|\n            format.json { render json: @developers, layout: false }\n        end\n    end\n    # ...\nend\n```\n\n### Listening select7 changed events\nIn 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.\nFor example:\n```ruby\n\u003cdiv data-controller=\"filter\" data-action=\"select7-changed@window-\u003efilter#update\"\u003e\n    \u003c%= select7_tag(:tags =\u003e [:id, :name], options: Tag.all) %\u003e\n\u003c/div\u003e\n\n# filter_controller.js\nimport { Controller } from \"@hotwired/stimulus\"\nexport default class extends Controller {\n    update(e) {\n        console.log(e.detail)\n        // field: \"tags\"\n        // action: \"add\"\n        // changedValue: \"3\"\n        // selectedValues: [\"1\", \"3\"]\n    }\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheforestvn88%2Frails-select7","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheforestvn88%2Frails-select7","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheforestvn88%2Frails-select7/lists"}