{"id":15890367,"url":"https://github.com/distroid/selectize-ajax","last_synced_at":"2025-03-20T11:35:57.985Z","repository":{"id":51230887,"uuid":"104573966","full_name":"distroid/selectize-ajax","owner":"distroid","description":"Useful Selectize.js form control tag with autocomplete, create and edit items by ajax.","archived":false,"fork":false,"pushed_at":"2021-05-19T17:39:17.000Z","size":43,"stargazers_count":5,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-24T19:04:56.053Z","etag":null,"topics":["ajax","rails","rails-helper-tag","ruby","selectize","selectize-ajax-tag","selectize-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/distroid.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-23T14:33:56.000Z","updated_at":"2022-04-05T03:06:28.000Z","dependencies_parsed_at":"2022-09-16T23:20:52.171Z","dependency_job_id":null,"html_url":"https://github.com/distroid/selectize-ajax","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/distroid%2Fselectize-ajax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/distroid%2Fselectize-ajax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/distroid%2Fselectize-ajax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/distroid%2Fselectize-ajax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/distroid","download_url":"https://codeload.github.com/distroid/selectize-ajax/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221753025,"owners_count":16875073,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["ajax","rails","rails-helper-tag","ruby","selectize","selectize-ajax-tag","selectize-rails"],"created_at":"2024-10-06T07:05:26.472Z","updated_at":"2024-10-28T00:41:05.669Z","avatar_url":"https://github.com/distroid.png","language":"Ruby","readme":"# Selectize::Ajax\n\nUseful [Selectize.js](https://selectize.github.io/selectize.js/) form control tag with autocomplete, create and edit items by ajax.\n\n## Installation\n\nAdd this line to your application's Gemfile:\n\n```ruby\ngem 'selectize-ajax'\n```\n\nAnd then execute:\n\n    $ bundle\n\nOr install it yourself as:\n\n    $ gem install selectize-ajax\n\nIn your application.js, include the following:\n\n    //= require selectize-ajax\n\nIn your application.css, include the following:\n\n    *= require selectize-ajax\n\n## Usage\n\nFor example you want create dropdown control for choosing post category\n\n```ruby\nselectize_ajax_tag f.object, :category_id, collection: Category.collection\n```\n\nThis code generate simple selectize dropdown.\nThe collection should be the following:\n\n```ruby\n[\n  ...\n  { value: \u003cid\u003e, label: \u003ctitle\u003e },\n  ...\n]\n```\n\n```ruby\ndef self.collection\n  Category.map do |category|\n    { label: category.title, value: category.id }\n  end\nend\n```\n### Autocomplete\n\nFor use ajax autocomplete you must add path for search:\n```ruby\nselectize_ajax_tag f.object, :category_id, collection_path: categories_autocomplete_path\n```\n\nBy default search param is `q`, if you want use other param you need set `search_param` for control.\n\n### Add new item\n\nYou can add new item from modal window. For this you need:\n\n 1. Add path and modal target to selectize control\n 2. Create modal and action on controller\n\n```ruby\n\u003c%= selectize_ajax_tag f.object, :category_id,\n    collection: Category.collection,\n    add_path: new_category_path,\n    add_modal: '#new-category-modal'\n%\u003e\n```\n\nBootstrap modal window\n```haml\n  ...\n  .modal-header\n    %h4.modal-title\n      Create new category\n\n  .modal-body\n    = simple_form_for(@category_form, url: categories_path,\n      data: { target: '#new-category-modal' }, remote: true) do |f|\n  ...\n```\n\nController action after success create new record should return json:\n```ruby\ndef create\n  ...\n  render json: { label: record.title, value: record.id }\nend\n```\n\nAfter that, the modal will close and the new record will be selected on dropdown.\n\n### Edit selected item\n\nFor edit selected item you should add new modal and edit action path.\n\n```ruby\n\u003c%= selectize_ajax_tag f.object, :category_id,\n    collection: Category.collection,\n    add_path: new_category_path,\n    add_modal: '#new-category-modal',\n    edit_path: edit_category_path(@category),\n    edit_modal: '#edit-category-modal'\n%\u003e\n```\n\n**WARNING**: if you want use  `edit_path` and do not have record id for generate link path you need use following templates:\n\n - Replace ID to string `{{id}}` - `edit_category_path(id: '{{id}}')`\n - Or use `edit_category_path(id: f.object.category_id || '{{id}}')`\n - Or write hardcoded path without rails hepler `'/category/{{id}}/edit'` **(not recomended)**\n\nScript automaticly will be replace `{{id}}` param to selected value.\n\n\n## All options\n\n Parameter          | Values            | Default\n--------------------|:------------------|:----------------\n`label`             | string            | From object\n`value`             | mixed             | From object\n`placeholder`       | string            | --\n`wrap_class`        | string \\| false   | --\n`wrap_class_only`   | true \\| false     | false\n`label_class`       | string            | --\n`input_html[class]` | string            | --\n`required`          | true \\| false     | From object\n`collection`        | array             | []\n`add_modal`         | string            | --\n`add_path`          | string            | --\n`add_button_text`   | string            | I18n.t('selectize_ajax.add_button_text')\n`add_button_class`  | string            | --\n`edit_path`         | string            | --\n`edit_modal`        | string            | --\n`edit_button_text`  | string            | I18n.t('selectize_ajax.edit_button_text')\n`edit_button_class` | string            | --\n`horizontal`        | true \\| false     | true\n`collection_path`   | string            | --\n`search_param`      | string            | `q`\n\n## Contributing\n\nBug reports and pull requests are welcome on GitHub at https://github.com/distroid/selectize-ajax.\n\n\n## License\n\nThe gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdistroid%2Fselectize-ajax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdistroid%2Fselectize-ajax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdistroid%2Fselectize-ajax/lists"}