eakoriakin / Ionic Selectable
Licence: mit
An Ionic-based versatile and highly customizable component that serves as a replacement to Ionic Select, and allows to search items, create items, customize the layout with templates and much more.
Stars: ✭ 459
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Ionic Selectable
ionic-selectable-demo
Ionic SelectSearchable Demo.
Stars: ✭ 22 (-95.21%)
Mutual labels: select, ionic, searchbar
Stf Vue Select
stf vue select - most flexible and customized select
Stars: ✭ 61 (-86.71%)
Mutual labels: search, select
Vanilla Select
Standalone replacement for select boxes.
Stars: ✭ 12 (-97.39%)
Mutual labels: search, select
Search Ui
Search UI. Libraries for the fast development of modern, engaging search experiences.
Stars: ✭ 1,294 (+181.92%)
Mutual labels: search, searchbar
Ynsearch
🔍 Awesome fully customize search view like Pinterest written in Swift 5.0 + Realm support!
Stars: ✭ 1,131 (+146.41%)
Mutual labels: search, searchbar
Ngx Mat Select Search
Angular component providing an input field for searching / filtering MatSelect options of the Angular Material library.
Stars: ✭ 416 (-9.37%)
Mutual labels: search, select
Autocomplete
🔮 Fast and full-featured autocomplete library
Stars: ✭ 1,268 (+176.25%)
Mutual labels: search, select
Materialsearchbar
Material Design Search Bar for Android
Stars: ✭ 2,008 (+337.47%)
Mutual labels: search, searchbar
Vue Cool Select
Select with autocomplete, slots, bootstrap and material design themes.
Stars: ✭ 195 (-57.52%)
Mutual labels: search, select
Hiddensearchwithrecyclerview
Simple library to have a hidden/shown search bar
Stars: ✭ 220 (-52.07%)
Mutual labels: search, searchbar
Modernsearchbar
The famous iOS search bar with auto completion feature implemented.
Stars: ✭ 167 (-63.62%)
Mutual labels: search, searchbar
Rskcollectionviewretractablefirstitemlayout
A light-weight UICollectionViewFlowLayout subclass that allows the first item to be retractable.
Stars: ✭ 281 (-38.78%)
Mutual labels: search, searchbar
React Select Search
⚡️ Lightweight select component for React
Stars: ✭ 379 (-17.43%)
Mutual labels: search, select
Cordova Plugin Ionic Webview
Web View plugin for Cordova, specialized for Ionic apps.
Stars: ✭ 419 (-8.71%)
Mutual labels: ionic
Vscode Es7 Javascript React Snippets
Extension for Javascript/React snippets with search supporting ES7 and babel features
Stars: ✭ 435 (-5.23%)
Mutual labels: search
Choices
A vanilla JS customisable select box/text input plugin ⚡️
Stars: ✭ 4,505 (+881.48%)
Mutual labels: select
Voice Overlay Ios
🗣 An overlay that gets your user’s voice permission and input as text in a customizable UI
Stars: ✭ 440 (-4.14%)
Mutual labels: search
Material Searchtransition
A demo showcasing how to implement a Dial app-like Toolbar transition
Stars: ✭ 409 (-10.89%)
Mutual labels: searchbar
Ionic Selectable
Demo | Features | Getting started | FAQ | Docs
An Ionic component similar to Ionic Select, that allows to search items, including async search, infinite scrolling and more.
Contents
Supported Ionic versions
- Ionic 3 (3.6.0 - 3.9.2)
- Ionic 4 (>=4.0.0)
Features
- Single selection
- Multiple selection
- Search items
- Search items asynchronously
- Search by several item fields
- Forms
- InfiniteScroll
- VirtualScroll
- Templates
- Grouping items
- Editing, adding and deleting items
- Disabling items
Getting started
- Install it.
// Ionic 3
npm install [email protected] --save
// Ionic 4
npm install [email protected] --save
- Import it.
First, importIonicSelectableModule
to yourapp.module.ts
that is normally located insrc\app\app.module.ts
.
import { IonicSelectableModule } from 'ionic-selectable';
@NgModule({
imports: [
IonicSelectableModule
]
})
export class AppModule { }
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 { }
- Add it to template.
<ion-item>
<ion-label>Port</ion-label>
<ionic-selectable
item-content // Required for Ionic 3 only.
[(ngModel)]="port"
[items]="ports"
itemValueField="id"
itemTextField="name"
[canSearch]="true"
(onChange)="portChange($event)">
</ionic-selectable>
</ion-item>
- 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);
}
}
- Enjoy it 😉
- Check out live demos to see what it is capable of.
Also, explore the docs and FAQ to learn more about its features.
Development
For contribution and delevopment please refer to Contribution.
Share it
If you find this component useful, please star the repo to let others know that it's reliable. Also, share it with friends and colleagues who might find it useful as well. Thank you 😄
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].