How i make my dropdown searchable also
these are the values in my drop down. i want to apply a search on this drop down. how i achieve this?
Maybe you could add a searchbar and adjust it to the same width as that dropdown and place it above it so it looks nice and then if you click into the searchbar open a new page where items appear as you search for them, then once an item is clicked just publish an even to get it from the previous page.
Or instead you could just put a magnifing glass icon instead of the search bar and then do the same as I previously said, that depends on how you want it to look like.
If you don’t want to open a new page for that then put a searchbar and remove items that don’t match the searchbar values. Arrays have a method named filter which can help you with this.
let me help you to save your time because i already did it.
Step 1: create page
ionic g page selectsearchsingle
Step 2: Copy following code
in selectsearchsingle.html
<ion-header no-border>
<ion-toolbar>
<ion-title>
{{titleText}}
</ion-title>
<ion-buttons start>
<button ion-button (click)="CloseModel()">
Cancel
</button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar color="light">
<ion-row>
<ion-col col-12 no-padding>
<ion-searchbar mode="ios" [(ngModel)]="searchText" (ionInput)="FilterItems()"></ion-searchbar>
</ion-col>
</ion-row>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-fab right bottom (click)="CloseModel()">
<button ion-fab>
<ion-icon name="checkmark"></ion-icon>
</button>
</ion-fab>
<ion-row *ngFor="let item of filterItems;" (click)="CheckChange(item)" style="border-bottom:1px solid #eee "
align-items-center>
<ion-col col-2 text-center style="padding:5px;">
<ion-icon *ngIf="item.selected" name="ios-checkmark-circle" color="primary" style="font-size: 26px;"></ion-icon>
<ion-icon *ngIf="!item.selected" name="ios-radio-button-off" color="primary" style="font-size: 26px;color: rgb(199, 199, 199);"></ion-icon>
</ion-col>
<ion-col col-10>
{{ item.name}}
</ion-col>
</ion-row>
</ion-content>
in selectsearchsingle.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { Constants } from '../../providers/constants';
@IonicPage()
@Component({
selector: 'page-selectsearchsingle',
templateUrl: 'selectsearchsingle.html',
})
export class SelectsearchsinglePage {
titleText: string = "";
searchText: string = "";
items: any[];
filterItems: any[];
selectedItems: any[] = [];
displayOk: any = false;
constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController,
public constant: Constants) {
this.items = this.navParams.get("data");
this.titleText = this.navParams.get("titleText");
this.FilterItems();
}
FilterItems() {
this.filterItems = this.items;
if (this.searchText.trim() !== '') {
this.filterItems = this.filterItems.filter((item) => {
return (item.name.toLowerCase().indexOf(this.searchText.toLowerCase()) > -1);
});
}
}
CheckChange(item: any) {
for (let index = 0; index < this.filterItems.length; index++) {
const element = this.filterItems[index];
if (element.key == item.key) {
this.filterItems[index].selected = true;
this.selectedItems = element;
}
else {
this.filterItems[index].selected = false;
}
}
}
CloseModel() {
this.viewCtrl.dismiss(this.selectedItems);
}
}
Step 3 : use it anywhere
in your .html file
<ion-item (click)="OpenSelect()">
<ion-label fixed>
<ion-icon item-start ios="ios-map" md="md-map" class="ionicon"></ion-icon>Your Label
</ion-label>
<ion-label text-right>{{YourValue}}</ion-label>
</ion-item>
in your .ts file
OpenSelect() {
let data = [];
for (let index = 0; index < this.YourDataArray.length; index++) {
const element = this.YourDataArray[index];
data.push({ name: element.Name, key: element.ID });
}
let modal = this.modalCtrl.create('SelectsearchsinglePage', { data: data, titleText: "Please Select" });
modal.onDidDismiss((data) => {
this.YourValue = data.name;
this.YourKey = data.key;
});
modal.present();
}
Hi, @pksquare. Similarly to @hirenkorat3’s answer, I’d recommend creating your own Popover component (https://ionicframework.com/docs/api/components/popover/PopoverController/). I think Popover would be more appropriate to what you want (from the screenshot you sent).
In the html, you could create a list of ion-radio components with an ion-searchbar at the top.
Hope that helps!
Let us know how you get on
can you please give me example source code?
This is easiest and fastest way I can think of.
- Generate an Angular component in the root of your project folder by using the Ionic-cli command below:
ionic generate component <COMPONENT_NAME>
In my example, I called it ‘list’, which was changed to ‘ListComponent’ by the cli
You should now see a folder in the root of your project called ‘components’. This should include a components.module.ts file and a folder for your new component
- Next, import ‘IonicModule’ into the components.module.ts file, like so:
import { IonicModule } from 'ionic-angular';
import { NgModule } from '@angular/core';
import { ListComponent } from './list/list';
@NgModule({
declarations: [ListComponent],
imports: [
IonicModule,
],
entryComponents: [
ListComponent
],
exports: [ListComponent]
})
export class ComponentsModule {}
This is very important as we want to be able to use the standard ionic components within our new component. If we don’t do this, then we will get errors where it won’t recognise the standard ionic elements we use, like ion-list.
- Import components.module.ts (ComponentsModule) into the root app.module.ts file:
import { ComponentsModule } from './../components/components.module';
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
ComponentsModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
- Now we can start designing our new component into a popover
Here is the code for /components/list/list.ts
import { Component } from '@angular/core';
import { ViewController } from 'ionic-angular';
@Component({
selector: 'list',
templateUrl: 'list.html'
})
export class ListComponent {
list = [
'Item 1',
'Item 2',
'Item 3',
'Item 4',
'Item 5',
'Item 6',
'Item 7',
'Item 8',
'Item 9',
]
filteredList = [];
text: string;
input: string;
constructor(private viewCtrl: ViewController) {
this.filteredList = this.list.slice();
}
onInputChange() {
this.filteredList = this.list.filter((item: string) => {
return item.toLowerCase().indexOf(this.input.toLowerCase()) > -1
})
}
onItemClick(item) {
this.viewCtrl.dismiss({item: item})
}
}
Here is the code for list.html
<ion-list>
<ion-searchbar (ionInput)="onInputChange()" [(ngModel)]="input"></ion-searchbar>
<ion-item *ngFor="let item of filteredList; let i = index">
<ion-label>{{item}}</ion-label>
<ion-radio [value]="item" (ionSelect)="onItemClick(item)"></ion-radio>
</ion-item>
</ion-list>
- Now you can can open this popover in any page like so
import { ListComponent } from '../../components/list/list';
...
let popover = popoverCtrl.create(ListComponent);
popover.present();
I hope this helps!
1 Like
I may be little late in answering, but I believe this could be, one of the best solution. There is a beautiful npm package named onic-select-searchable, you can use it with ion-select. This is the link for the same. It will take care almost all the cases that you may encounter in a drop down with search.
1 Like
Woah! This is pretty cool! Didn’t know about this.
my select searable is not working please suggest me example
What is the problem that your facing ?
package installation
and what to import in module.ts
I have already added the link which explains the integration in detail, adding again, please check it.
1 Like
Hello You can find select search as well as multiple select search