https://github.com/eakoriakin/ionic-selectable
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.
https://github.com/eakoriakin/ionic-selectable
ion-select ionic search searchbar select
Last synced: 5 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/eakoriakin/ionic-selectable
- Owner: eakoriakin
- License: mit
- Created: 2018-02-07T08:57:43.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-11-08T00:24:29.000Z (11 months ago)
- Last Synced: 2025-05-07T00:48:06.166Z (5 months ago)
- Topics: ion-select, ionic, search, searchbar, select
- Language: TypeScript
- Homepage:
- Size: 5.58 MB
- Stars: 556
- Watchers: 12
- Forks: 129
- Open Issues: 76
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[npm-url]: https://npmjs.org/package/ionic-selectable
[npm-image]: https://img.shields.io/npm/v/ionic-selectable.svg
[dm-image]: https://img.shields.io/npm/dm/ionic-selectable.svg
[dt-image]: https://img.shields.io/npm/dt/ionic-selectable.svg
# Ionic Selectable v5(alpha) is here
## `@ionic-selectable/core` for Vanilla JS
## `@ionic-selectable/angular` for Angular
- Made with stencil
- Web components
- Support for Vanilla JS
- Support for Angular
- Other frameworks support is coming!!!
- [More info](https://github.com/ionic-selectable/ionic-selectable/tree/v5)
# Ionic Selectable
[![npm][npm-image]][npm-url]
[![npm][dt-image]][npm-url]
[![npm][dm-image]][npm-url]
[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)
An 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.
# Contents
- [Demo](https://stackblitz.com/edit/ionic-selectable-v4-basic-usage?file=app/pages/home/home.html)
- [Features](#features)
- [Getting started](#getting-started)
- [Supported Ionic versions](#supported-ionic-versions)
- [FAQ](../../wiki#faq)
- [Docs](../../wiki)
- [Theming](../../wiki#theming)
## Supported Ionic versions
- Ionic 3 (3.6.0 - 3.9.2)
- Ionic 4 (>=4.0.0)
- Ionic 7 Standalone Component (>=5.0.2)
## Features
- [Single selection](https://stackblitz.com/edit/ionic-selectable-v4-basic-usage?file=app/pages/home/home.html)
- [Multiple selection](../../wiki#ismultiple)
- [Search items](https://stackblitz.com/edit/ionic-selectable-v4-basic-usage?file=app/pages/home/home.html)
- [Search items asynchronously](https://stackblitz.com/edit/ionic-selectable-v4-on-search-event?file=app/pages/home/home.html)
- [Search by several item fields](https://stackblitz.com/edit/ionic-selectable-v4-on-search-event?file=app/pages/home/home.html)
- [Forms](https://stackblitz.com/edit/ionic-selectable-v4-form-control?file=app/pages/home/home.html)
- [InfiniteScroll](https://stackblitz.com/edit/ionic-selectable-v4-infinite-scroll?file=app/pages/home/home.html)
- [VirtualScroll](https://stackblitz.com/edit/ionic-selectable-v4-virtual-scroll?file=app/pages/home/home.html)
- [Templates](../../wiki#templates)
- [Grouping items](../..//wiki#grouping)
- [Editing, adding and deleting items](../../wiki#editing)
- [Disabling items](../../wiki#disableditems)
## Getting started
1. Install it.
```
// Ionic 3
npm install ionic-selectable@3.5.0 --save
// Ionic 4
npm install ionic-selectable@4.8.0 --save
// Ionic 7 with Angular 16 Standalone component
npm install ionic-selectable@5.0.2 --save
```
2. Import it.
First, import `IonicSelectableModule` to your `app.module.ts` that is normally located in `src\app\app.module.ts`.
```
import { IonicSelectableModule } from 'ionic-selectable';
@NgModule({
imports: [
IonicSelectableModule
]
})
export class AppModule { }
```
**For Angular 16 standalone component**
```
import { IonicSelectableComponent } from 'ionic-selectable';
@Component({
...,
standalone: true,
imports: [IonicSelectableComponent]
})
```
**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.
```
import { IonicSelectableModule } from 'ionic-selectable';
import { HomePage } from './home';
@NgModule({
declarations: [
HomePage
],
imports: [
IonicPageModule.forChild(HomePage),
IonicSelectableModule
]
})
export class HomePageModule { }
```
3. Add it to template.
```
Port
```
4. Configure it.
```
import { IonicSelectableComponent } from 'ionic-selectable';
class Port {
public id: number;
public name: string;
}
@Component({ ... })
export class HomePage {
ports: Port[];
port: Port;
constructor() {
this.ports = [
{ id: 1, name: 'Tokai' },
{ id: 2, name: 'Vladivostok' },
{ id: 3, name: 'Navlakhi' }
];
}
portChange(event: {
component: IonicSelectableComponent,
value: any
}) {
console.log('port:', event.value);
}
}
```
5. Enjoy it 😉
6. Check out [live demos](https://stackblitz.com/@eakoriakin) to see what it is capable of.
Also, explore the [docs](../../wiki) and [FAQ](../../wiki#faq) to learn more about its features.
## Development
For contribution and delevopment please refer to [Contribution](../../wiki/Contribution).
## Share it
If 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 😄