Ionic Token Input with Autocomplete

ionic-tag-input-header

When you want to automatically transform your input values into small chunks or tokens just like the Facebook app, you will not get far with the standard inputs we have.

The Ionic Academy

More content, more detailed video courses and community help inside the member area.

Not an Ionic Academy Member? Click here to learn more

But lucky us there is an Angular package that will help us to tokenize our input field and split our values into nice visual blocks. In this quick win we will build our own app with tokeninput and change some of the styling and display the added results inside a list. Our final will look like below!

ionic-taginput

Setup our Tokeninput App

We start with a blank Ionic app and install the needed NPM package so go ahead and run:

Now we need to make sure that we add it to our src/app/app.module.ts imports array, therefore change it to:

We are ready to use the tokenize package now!

Implement the Tokenize Functions and View

There are 2 different ways to use our package: We can either specify an array for auto suggestions which users can pick from or we could just allow anything.

In our example we create an array of some hashtags where the user can select the appropriate ones for his talk (the talks idea came from a question inside the community of the Ionic Academy).

We also store the name of a talk and push the talk we create to an array once the user saves his input. Nothing really fancy here, so go ahead and change your src/pages/home/home.ts to:

If you don’t want the autocomplete you can leave that out of course.

Now the view is the actual interesting stuff here. We add a field for the talks name and also the rl-tag-input which is the element we can use because we install the tag input package!

There are quite a few options which we can specify on the element, you can check all of them here.

For now we use the following:

  • ngModel: The object which holds the input in form of an array
  • addOnBlur: Whether the item should be added once the field loses focus, not really helpful so false
  • autocomplete: Activate to show a box with autocomplete options
  • autocompleteItems: The array that will be looked up for the autocomplete function
  • placeholder: Well..the placeholder for the input field

Besides that we just craft a simple list below the fields to show our array of current added talks. The topics for a talk will be an array, so we use the join() function to craft a string where each token is separated by a space.

Now go to your src/pages/home/home.html and change it to:

This looks already pretty good now, but I found that some additional styling makes it look even more mobile as the general package is meant for Angular and web apps I guess.

The selectors are directly retrieved from inspecting the view elements, perhaps there’s also a better way of doing these things but for now this works, so open your src/pages/home/home.scss and insert:

Now you got your own input field with tokenize function and also autocomplete, how cool is that?

If you find a better way of styling it definitely let me know, otherwise go ahead and add this function to your app because your users will love it!

You can find a video of this quick win below.