An Ionic component similar to ion-select, that allows to search items, including async search and infinite scrolling.
- Install it.
npm install ionic-select-searchable --save
- Import it.
import { SelectSearchableModule } from 'ionic-select-searchable';
@NgModule({
imports: [
SelectSearchableModule
]
})
export class AppModule { }
- Add it to template.
<ion-item>
<select-searchable
[(ngModel)]="port"
[items]="ports"
itemValueField="id"
itemTextField="name"
[canSearch]="true"
(onChange)="portChange($event)">
<ng-template selectSearchableLabelTemplate>
Port
</ng-template>
</select-searchable>
</ion-item>
- Configure it.
import { SelectSearchableComponent } from 'ionic-select-searchable';
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: SelectSearchableComponent, value: any }) {
console.log('port:', event.value);
}
}
The error occurs when SelectSearchableModule isn't imported to your app module. In case of using lazy loading you need to import SelectSearchableModule to every page module.
import { LazyPage } from './lazy';
import { SelectSearchableModule } from 'ionic-select-searchable';
@NgModule({
declarations: [
LazyPage
],
imports: [
IonicPageModule.forChild(LazyPage),
SelectSearchableModule
]
})
export class LazyPageModule { }
Loading time and responsiveness of the component might get rather slow, when dealing with a lot of items, e.g. a 1000 or more. There are two ways to tackle it.
Async search
In this case no items are loaded and displayed initially. Items will be added while user is typing to search.
See demo.
Infinite scroll
Initially only the first bunch of items is loaded and displayed, for example we can show only the first 20 items.
Then more items is loaded bunch by bunch while user is scrolling down.
See demo.
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 😄
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent