Ion-select with Searchbar


Now SelectSearchable is available as an npm module :grinning:

npm install ionic-select-searchable --save


Thanks for your reply …
actually the problem was that i didn’t put the tag inside of so it was taking the whole screen …my Mistake :persevere: about the sample here it is
inside the component{
//another controllers

where this.user is an array of users
in the template
<select-searchable title=“Choose The Drivers” itemValueField=“uid” itemTextField=“name” [items]=“users”
(onChange)=“portChange($event)” formControlName=“drivers”>

Hope this Helps some one
every thing is ok for me :smiley::smiley::smiley:


Hey @wasiiim, great :+1:


@eakoriakin I am also trying to implement same but on an Ionic alert box/window.

I know that it is possible using Ionic Modals, but I will prefer Ionic alert over it.

Do you have any suggestion how I can achieve the same in an alert box?


Hi @sujit77, I also tried with Alert initially, but had to use Modal eventually. As far as I know, Alert doesn’t allow to customize the template/HTML, so features like search can’t be added to Alert.

Do let me know, please, if you figure it out with Alert.


Hi, I’m using the node module and i just can’t make it work. Here is my problem:

and specs:

Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.8
Angular Core: 5.0.3
Angular Compiler CLI: 5.0.3
Node: 8.9.4
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.167 Safari/537.36


Hi @Diego74965, you must be importing SelectSearchableModule instead of SelectSearchable.
Try to update the package: npm i ionic-select-searchable@1.0.9

And then import SelectSearchable class to your component.
import { SelectSearchable } from 'ionic-select-searchable';

Hope it helps :slight_smile:



I have a problem :frowning: . I need to do a two way binding with the selectedItems because I put the select on iterable form.

Have you any way to do that?

Thanks you very much :smiley:


Hi @patosartore, can you give a sample code, please, so I can understand exactly what you need?


Hi @eakoriakin,

Is there any way I can use your npm module ionic-select-searchable with angular 4? or specifically angular 4.4.3?
When I take the version 1.0.7 of your module, I get the following error

SelectSearchableModule in /node_modules/ionic-select-searchable/source/select-searchable.module.d.ts’ imported by the module ‘ConfigModule in config/src/config.module.ts’. Please add a @NgModule annotation.

Any help much appreciated.


Hey, try 1.0.9 version. Also, if you need to build it for Android later, use —release flag instead of —prod


@eakoriakin. Thanks for the reply. Actually I tried using 1.0.9 at first, it says metadata version mismatch for module found version 4 expected 3. Hence tried a lower version. Any solution for the metadata mismatch?


on load of a page. ngmodel variable is not binding. i am not able to set a value to variable onload of a page. can anyone help me?


Hi @akshaysm, can you show me how you do it? What do you have in your class and in HTML?


@eakoriakin this is my HTML
<select-searchable name=“country” [(ngModel)]=“country” title=“Country” [items]=“countryList” itemValueField=“CountryId” itemTextField=“Description” [canSearch]=“true” (onChange)=“country($event)” searchPlaceholder=“Search your Country”>

in class i just have

country(event: { component: SelectSearchable, value: any }) {
this.user.CountryId = event.value.CountryId;


Okay, so:

  name=“country” // No need for "name" attribute. Probably, remove it.
  (onChange)=“country($event)” // Rename it to "onCountrySearch", because "country" is used for [(ngModel)]already.
  searchPlaceholder=“Search your Country”>


  searchPlaceholder=“Search your Country”>


country: any;

constructor() {
  this.countryList = [{ CountryId: 1, Description: 'Japan' }, { CountryId: 2, Description: 'Seychelles' }]

  // Do actual binding to "country" field, that we use in our ngModal. = { CountryId: 1, Description: 'Japan' };

onCountrySearch(event: { component: SelectSearchable, value: any }) {
  this.user.CountryId = event.value.CountryId;



I’m new to Ionic. When I select more items from selection screen, it displays the items as a list in select instead of displaying all selected items in single line with dots…

In demo it’s showing as all selected options in single “div” as in below image.


But for me it displays each item in single line and occupies more space like:


Please let me know how can I display all selected item as in 1st image.


hi, please add close event like ion-select close to close select modal programmatically.


Hey, do you mean close() method? So you can close select page from code?


Hi @Aanand9, I’ve added an ability to create templates of any complexity for value/select item/s in ionic-select-searchable@2.0.0 release.

There some breaking changes in 2.0.0 version, so please follow the instructions to update first.

When update is complete you can use the code below to display selected items in a line ending with ellipsis (…).

<select-searchable [items]="ports">
    <ng-template selectSearchableValueTemplate let-ports="value">
        <div class="select-searchable-value-item">

formatPorts(ports: Port[]) {
    return => {
    }).join(', ');