[npm-url]: https://npmjs.org/package/@ionic-selectable/core
[npm-image]: https://img.shields.io/npm/v/@ionic-selectable/core.svg
[dm-image]: https://img.shields.io/npm/dm/@ionic-selectable/core.svg
[dt-image]: https://img.shields.io/npm/dt/@ionic-selectable/core.svg
# Ionic Selectable
[![npm][npm-image]][npm-url]
[![npm][dt-image]][npm-url]
[![npm][dm-image]][npm-url]
[Demo](https://stackblitz.com/edit/ionic-selectable-basic?file=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-basic?file=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 5 (>=5.0.0) alpha
## Supported previus Ionic versions
- Ionic 3 (3.6.0 - 3.9.2) [ionic-selectable](https://www.npmjs.com/package/ionic-selectable)
- Ionic 4 (>=4.0.0) [ionic-selectable](https://www.npmjs.com/package/ionic-selectable)
## Features
- [Single selection](https://stackblitz.com/edit/ionic-selectable-basic?file=pages/home/home.html)
- [Multiple selection](../../wiki#ismultiple)
- [Search items](https://stackblitz.com/edit/ionic-selectable-basic?file=pages/home/home.html)
- [Search items asynchronously](https://stackblitz.com/edit/ionic-selectable-on-search?file=pages/home/home.html)
- [Search by several item fields](https://stackblitz.com/edit/ionic-selectable-on-search?file=pages/home/home.html)
- [Forms](https://stackblitz.com/edit/ionic-selectable-form-control?file=pages/home/home.html)
- [InfiniteScroll](https://stackblitz.com/edit/ionic-selectable-infinite-scroll?file=pages/home/home.html)
- [VirtualScroll](https://stackblitz.com/edit/ionic-selectable-virtual-scroll?file=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. Add add the following inside the ``.
```html
```
2. Add it to template.
```html
Ports
```
4. Configure it.
```js
var portElement = document.getElementById("port");
portElement.items = [
{ id: 1, name: "Salina Cruz", country: { name: "Mexico" } },
{ id: 3, name: "Veracruz", country: { name: "Mexico" } },
{ id: 2, name: "Alicante", country: { name: "Spain" } },
{ id: 4, name: "Santa Eugenia De Riveira", country: { name: "Spain" } },
{ id: 5, name: "Mantes", country: { name: "France" } },
];
portElement.value = { id: 1, name: 'Salina Cruz', country: { name: "Mexico"} };
portElement.hasConfirmButton = true;
portElement.addEventListener("changed", (event) => {
console.log(event);
});
portElement.addEventListener("closed", (event) => {
console.log(event);
});
```
3. Enjoy it 😉
4. 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/eakoriakin/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 😄