Ion-select with Searchbar


Hey, have a look at this demo:


Thank you so much! It’s working!


You are most welcome :wink:


Hi I get this error:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'setElementClass' of null

I followed all the installation instructions.
What Can be the problem?

$ ionic info

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.10
    Cordova Platforms  : android 7.0.0 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2


    Android SDK Tools : 25.2.5
    Node              : v8.10.0
    npm               : 5.6.0
    OS                : Windows 10

Environment Variables:


    backend : legacy

Here is my code

app.module.ts file:

import { SelectSearchableModule } from 'ionic-select-searchable';

  imports: [

register-business.module.ts file:

import { SelectSearchableModule } from 'ionic-select-searchable';

  imports: [

register-business.ts file:

class Port {
  public id: number;
  public name: string;

  selector: 'page-register-business',
  templateUrl: 'register-business.html',

export class RegisterBusinessPage {
  ports: Port[];
  port: Port;

  @ViewChild(Slides) slides: Slides;
  @ViewChild(Content) content: Content;

  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);

register-business.html file:

  <ion-slides class="padding slide-shown-{{slideShownIndex}}" dir="rtl" pager="true" (ionSlideDidChange)="slideChanged()">

    <ion-slide class="register-business-data">
      <div class="register-wrapper">
        <div class="logo-wrapper set-top">
          <div class="top-title">
            <select-searchable item-content [(ngModel)]="port" [items]="ports" itemValueField="id" itemTextField="name" [canSearch]="true" (onChange)="portChange($event)">              



Hey, thanks for reporting a bug :+1: I fixed it in 2.7.4 release. Please, update:

npm i ionic-select-searchable@2.7.4


Excellent tool, I’ve integrated it into my project - thank you for all your work.
I’ve used it to search for street names.
One thing our design department wants, is once a street is typed in, if it doesn’t exist they would like a search item to appear in the list that says “Create [search text]” (which can then be clicked to launch an event to add that list to the items…)

Using your product, would you recommend a way to implement this? The “create [search text]” item showing up, specifically.


Hey, thanks :slight_smile:
Can you please submit an issue for the above here:

I have an idea about it and will look into it soon.


I’ve got a new question regarding the UI for ion-searchable. So I was wanting to see if it was possible to add a button dynamically once the user selects the searchable element and it pops up.

Something like this, black box represents some type of button.

Mainly a button that would update the list based on user location. I’m not sure if this is possible, and I know there are most likely different ways to do it. Any feedback would be greatly appreciated.


hi @eakoriakin, i have tried to download your demo, but i cannot find components\select folder, can you help me?
thank you.


Hey @elwanta, the project moved to github, checkout please for instructions on how to install and use the component.


okay, thank you @eakoriakin


Everything is there, thank you!


sorry i dont get you


im download but components folder not there