I’ve seen a couple of posts here with people asking for an ability to search tems in ion-select.
So, I decided to share my solution for that.
Basically, it’s a component styled to look like ion-select. It allows to search items (including AJAX search).
Here is a Plunker demo and below are some screenshots.
iOS
Android
Adding it to your project
- Copy files from select folder to your project.
- Add SelectSearchableModule module to imports array of your app module.
import { SelectSearchableModule } from '../components/select/select-module';
@NgModule({
imports: [ SelectSearchableModule ],
})
export class AppModule { }
- Add it to a page.
HTML:
<ion-item>
<select-searchable
[(ngModel)]="port"
title="Port"
itemValueField="id"
itemTextField="name"
[items]="ports"
[canSearch]="true">
</select-searchable>
</ion-item>
TypeScript:
import { Component } from '@angular/core';
import { SelectSearchable } from '../components/select/select';
class Port {
public id: number;
public name: string;
public country: string;
}
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
ports: Port[];
port: Port;
constructor() {
this.ports = [
{ id: 0, name: 'Tokai', country: 'Japan' },
{ id: 1, name: 'Vladivostok', country: 'Russia' },
{ id: 2, name: 'Navlakhi', country: 'India' }
];
}
portChange(event: { component: SelectSearchable, value: any }) {
console.log('value:', event.value);
}
}
Using it with Angular Forms
SelectSearchable component is fully compatible with Angular 2 Forms and can be used with both ngModel or FormControl.
Parameters (API)
items: any[]
A list of items.
isSearching: boolean
Use it to show or hide loading spinner for AJAX search.
itemValueField: string
The name of a field which is used as a unique identifier of an item.
itemTextField: string
The name of a field which is used in a list to display an item.
canSearch: boolean
Whether to show the Searchbar.
canReset: boolean
Whether to show the “Clear” button which clears the value.
title: string
Title.
searchPlaceholder: string = 'Enter 3 or more characters’
Placeholder for the Searchbar.
onChange: EventEmitter
An event which is fired when an item is selected from the list.
onSearch: EventEmitter
An event which is fired when a user is typing in the Searchbar.
itemTemplate: Function
A method which is used to create a text to display in the list for an item.
This parameter has a priority over itemTextField.
multiple: boolean
Allows to select multiple items from the list.
Just pass an array of objects as a value.
and when i run Ionic Serve, there was nothing error in syntax, etc.