{"id":14985783,"url":"https://github.com/eakoriakin/ionic-selectable","last_synced_at":"2025-12-15T12:20:46.612Z","repository":{"id":38397354,"uuid":"120589481","full_name":"eakoriakin/ionic-selectable","owner":"eakoriakin","description":"Ionic Selectable is an Ionic versatile and highly customizable component that serves as a replacement to Ionic Select, and allows to search items, including async search, create items, customize the layout with templates and much more. It provides an intuitive API and is easy to set up and use.","archived":false,"fork":false,"pushed_at":"2024-11-08T00:24:29.000Z","size":5856,"stargazers_count":556,"open_issues_count":76,"forks_count":129,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-05-07T00:48:06.166Z","etag":null,"topics":["ion-select","ionic","search","searchbar","select"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/eakoriakin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"open_collective":"ionic-selectable"}},"created_at":"2018-02-07T08:57:43.000Z","updated_at":"2025-04-20T07:13:21.000Z","dependencies_parsed_at":"2023-01-23T21:31:40.588Z","dependency_job_id":"8a101c2e-9822-4808-8ddc-8a5d83b672cd","html_url":"https://github.com/eakoriakin/ionic-selectable","commit_stats":{"total_commits":133,"total_committers":7,"mean_commits":19.0,"dds":0.3458646616541353,"last_synced_commit":"6b03379d4f27c8fe55ce2d05f6f88e276d00f318"},"previous_names":["eakoriakin/ionic-select-searchable","ionic-selectable/ionic-selectable"],"tags_count":67,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eakoriakin%2Fionic-selectable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eakoriakin%2Fionic-selectable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eakoriakin%2Fionic-selectable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eakoriakin%2Fionic-selectable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eakoriakin","download_url":"https://codeload.github.com/eakoriakin/ionic-selectable/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253857862,"owners_count":21974826,"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":["ion-select","ionic","search","searchbar","select"],"created_at":"2024-09-24T14:11:39.640Z","updated_at":"2025-05-15T19:08:50.497Z","avatar_url":"https://github.com/eakoriakin.png","language":"TypeScript","readme":"[npm-url]: https://npmjs.org/package/ionic-selectable\n[npm-image]: https://img.shields.io/npm/v/ionic-selectable.svg\n[dm-image]: https://img.shields.io/npm/dm/ionic-selectable.svg\n[dt-image]: https://img.shields.io/npm/dt/ionic-selectable.svg\n\n# Ionic Selectable v5(alpha) is here\n\n## `@ionic-selectable/core` for Vanilla JS\n\n## `@ionic-selectable/angular` for Angular\n\n- Made with stencil\n- Web components\n- Support for Vanilla JS\n- Support for Angular\n- Other frameworks support is coming!!!\n- [More info](https://github.com/ionic-selectable/ionic-selectable/tree/v5)\n\n# Ionic Selectable\n\n[![npm][npm-image]][npm-url]\n[![npm][dt-image]][npm-url]\n[![npm][dm-image]][npm-url]\n\n[Demo](https://stackblitz.com/edit/ionic-selectable-v4-basic-usage?file=app/pages/home/home.html) | [Features](#features) | [Getting started](#getting-started) | [FAQ](../../wiki#faq) | [Docs](../../wiki)\n\nAn Ionic component similar to [Ionic Select](https://ionicframework.com/docs/api/components/select/Select/), that allows to search items, including async search, infinite scrolling and more.\n\n![iOS Demo](images/demo.gif)\n\n# Contents\n\n- [Demo](https://stackblitz.com/edit/ionic-selectable-v4-basic-usage?file=app/pages/home/home.html)\n- [Features](#features)\n- [Getting started](#getting-started)\n- [Supported Ionic versions](#supported-ionic-versions)\n- [FAQ](../../wiki#faq)\n- [Docs](../../wiki)\n- [Theming](../../wiki#theming)\n\n## Supported Ionic versions\n\n- Ionic 3 (3.6.0 - 3.9.2)\n- Ionic 4 (\u003e=4.0.0)\n- Ionic 7 Standalone Component (\u003e=5.0.2)\n\n## Features\n\n- [Single selection](https://stackblitz.com/edit/ionic-selectable-v4-basic-usage?file=app/pages/home/home.html)\n- [Multiple selection](../../wiki#ismultiple)\n- [Search items](https://stackblitz.com/edit/ionic-selectable-v4-basic-usage?file=app/pages/home/home.html)\n- [Search items asynchronously](https://stackblitz.com/edit/ionic-selectable-v4-on-search-event?file=app/pages/home/home.html)\n- [Search by several item fields](https://stackblitz.com/edit/ionic-selectable-v4-on-search-event?file=app/pages/home/home.html)\n- [Forms](https://stackblitz.com/edit/ionic-selectable-v4-form-control?file=app/pages/home/home.html)\n- [InfiniteScroll](https://stackblitz.com/edit/ionic-selectable-v4-infinite-scroll?file=app/pages/home/home.html)\n- [VirtualScroll](https://stackblitz.com/edit/ionic-selectable-v4-virtual-scroll?file=app/pages/home/home.html)\n- [Templates](../../wiki#templates)\n- [Grouping items](../..//wiki#grouping)\n- [Editing, adding and deleting items](../../wiki#editing)\n- [Disabling items](../../wiki#disableditems)\n\n## Getting started\n\n1. Install it.\n\n```\n// Ionic 3\nnpm install ionic-selectable@3.5.0 --save\n\n// Ionic 4\nnpm install ionic-selectable@4.8.0 --save\n\n// Ionic 7 with Angular 16 Standalone component\nnpm install ionic-selectable@5.0.2 --save\n\n```\n\n2. Import it.  \n   First, import `IonicSelectableModule` to your `app.module.ts` that is normally located in `src\\app\\app.module.ts`.\n\n```\nimport { IonicSelectableModule } from 'ionic-selectable';\n\n@NgModule({\n  imports: [\n    IonicSelectableModule\n  ]\n})\nexport class AppModule { }\n\n```\n**For Angular 16 standalone component**\n\n```\nimport { IonicSelectableComponent } from 'ionic-selectable';\n\n@Component({\n    ...,\n    standalone: true,\n    imports: [IonicSelectableComponent]\n})\n\n```\n\n**Note:** Additionally, if you use Ionic 3+ you might be as well using lazy loaded pages. Check if your pages have a module file, for example, `home.module.ts`, and if they do then import `IonicSelectableModule` to each page module too.\n\n```\nimport { IonicSelectableModule } from 'ionic-selectable';\nimport { HomePage } from './home';\n\n@NgModule({\n  declarations: [\n    HomePage\n  ],\n  imports: [\n    IonicPageModule.forChild(HomePage),\n    IonicSelectableModule\n  ]\n})\nexport class HomePageModule { }\n\n```\n\n3. Add it to template.\n\n```\n\u003cion-item\u003e\n  \u003cion-label\u003ePort\u003c/ion-label\u003e\n  \u003cionic-selectable\n    item-content // Required for Ionic 3 only.\n    [(ngModel)]=\"port\"\n    [items]=\"ports\"\n    itemValueField=\"id\"\n    itemTextField=\"name\"\n    [canSearch]=\"true\"\n    (onChange)=\"portChange($event)\"\u003e\n  \u003c/ionic-selectable\u003e\n\u003c/ion-item\u003e\n```\n\n4. Configure it.\n\n```\nimport { IonicSelectableComponent } from 'ionic-selectable';\n\nclass Port {\n  public id: number;\n  public name: string;\n}\n\n@Component({ ... })\nexport class HomePage {\n  ports: Port[];\n  port: Port;\n\n  constructor() {\n    this.ports = [\n      { id: 1, name: 'Tokai' },\n      { id: 2, name: 'Vladivostok' },\n      { id: 3, name: 'Navlakhi' }\n    ];\n  }\n\n  portChange(event: {\n    component: IonicSelectableComponent,\n    value: any\n  }) {\n    console.log('port:', event.value);\n  }\n}\n```\n\n5. Enjoy it 😉\n6. Check out [live demos](https://stackblitz.com/@eakoriakin) to see what it is capable of.  \n   Also, explore the [docs](../../wiki) and [FAQ](../../wiki#faq) to learn more about its features.\n\n## Development\n\nFor contribution and delevopment please refer to [Contribution](../../wiki/Contribution).\n\n## Share it\n\nIf you find this component useful, please star the [repo](https://github.com/ionic-selectable/ionic-selectable) to let others know that it's reliable. Also, share it with friends and colleagues who might find it useful as well. Thank you 😄\n","funding_links":["https://opencollective.com/ionic-selectable"],"categories":["Components"],"sub_categories":["Form / Input"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feakoriakin%2Fionic-selectable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feakoriakin%2Fionic-selectable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feakoriakin%2Fionic-selectable/lists"}