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.

Setting up our Ionic App

Like always we start with a blank Ionic app and then install the package within our app:

Are you ready to start learning?

Join the Ionic Academy

To make use of the component we also have to load it inside our component, so go ahead and change your app/app.module.ts to:

Now you are ready to include the component wherever you want inside your app!

Adding the Select Component with Searchbar

We will implement 2 versions of the select view, one basic and another more complex example. For both we need some data and functions inside our class.

Also, we might want to keep a reference to the actual input element as a ViewChild so we can later even open the select directly from our code!

Besides that our functions userChanged and onClose will be called from the component directly and we only have to set it inside the view.

Nothing really fancy so far, so go ahead and change your pages/home/home.ts to:

Now it’s time to actually use our select searchbar component inside the view. As said before, we add one basic version first.

This version will display a list of options, and once you select an option the select will be closed and the onChange function will be called with the element. In order to work you also need to specify the items for the list and another model which can hold the selected value of your list.

For the basic version, change your pages/home/home.html to:

We also already added the button to trigger the select view from code, but that’s not really special.

Now for the second more advanced select we add a few more options like the isMultiple key that allows to select more than just one entry from the list. We also define additional button texts and the onClose function.

You can try out a few more by adding this inside the content of your page:

If you want to check out all options just browser around the documentation of the select searchbar component!

There are also quite a few Stackblitz examples on the page of the creator where you can see different variants of the select in action.

You can also find a video version of this Quick Win below.