Ionic Searchable Select Component [v3]

If you have used a select component with Ionic before you might have noticed a general lack of options and functions that you need. Lucky us there’s a component that offers most of what we need right out of the box and is super easy to integrate!

Inside this Quick Win we will use the ionic select searchable component to build a simple select popup with searchbar and more functionality like selecting multiple elements.

The image above shows our result, so let’s dive right into it.


ionic-academy-start

You must be a Member to view this Quick Win

Access all courses and lessons, track your progress, connect with Developers & build awesome Ionic Apps.


Comments on Ionic Searchable Select Component [v3]

  1. Kyle Reno says:

    https://uploads.disquscdn.com/images/ff83d115a739c9c51ce354d939d64c1e05159b003b8bbe394547f7db9ed7c963.png

    I get the error that select-searchable is not a known element but ive already done
    import { SelectSearchableComponent } from ‘ionic-select-searchable’; for both appmodule.ts and the page Im using bill-splitting.ts. I don’t know how to continue

    1. Luciana Elisa says:

      Im with the same error. Somebody know how to solve this?

    2. Gilbert says:

      did you install the module first?

    3. Sarah says:

      You should import the SelectSearchableModule in app.module.ts and the SelectSearchableComponent in bill-splitting.ts. (Note they are different imports). So in app.module.ts it should be import { SelectSearchableModule } from ‘ionic-select-searchable’; and in bill-splitting.ts it should be import { SelectSearchableComponent } from ‘ionic-select-searchable’; Hope that helps. and make sure SelectSearchableModule is in your “imports” array in app.module.ts

  2. Luciana Elisa says:

    Thank you Simon!

  3. Great tutorial Simon, btw, have you ever tried to customize the listing template of the selectable component ?.

    I read the instructions in the documentation on how to achieve this, but it does not seems to work for me, here is an example.

    https://stackblitz.com/edit/ionic-selectable-basic-dwp344

  4. Mohamed Marmy says:

    right now i have such big amount of data, so when it loads the component it takes awhile, can i display just a chunk of the data? and still searches in all of data?

  5. देसाई रितेश says:

    Religion *

    {{masters.religionName}}

    Religion
    is mandatory.

    but i am not geting the list in my searchable.
    can you help me please i am not able to move forward.

Leave a Reply

Your email address will not be published. Required fields are marked *