Adding the Multiselect feature to an Angular2 Autocomplete

Angular2 Multi Selection Autocomplete
Angular2 Multi Selection Autocomplete

After I wrote the tutorial on how to create an angular2 autocomplete, lots of people have been asking me to add the multiselect feature to it, that’s the reason why I decided to write this one. I’m going to continue from where I stopped, so make sure you followed and understood every step from the previous tutorial before you proceed.

The first thing we have to do is to create a variable called selected, it’s just an array we’re going to use to store all the items selected by the user.

public selected = [];

Now let’s change a little bit the select() function, instead of assigning the item to the this.query variable we’re going to add it to the selected array and clean the this.query. This is the modification that will make the multiple selection possible. Here’s the code after the modification:

    this.query = '';
    this.filteredList = [];

We also need a way to remove items from the array, I’m going to create a function called remove (obviously), here’s the code:


This is a really straightforward function, it just receives an item and uses the splice() function to remove it from the array.

The template will also suffer some changes:

<div class="container" >
    <div class="input-field col s12">
      <input id="country" type="text" class="validate filter-input" [(ngModel)]=query (keyup)=filter()>
      <label for="country">Country</label>
    <div class="suggestions" *ngIf="filteredList.length > 0">
        <ul *ngFor="#item of filteredList" >
            <li >
                <a (click)="select(item)">{{item}}</a>
    <div *ngFor="#item of selected">
        <div class="selected" >
            <a (click)="remove(item)">x</a>

Notice that I’ve added another div bellow the suggestions list, that’s where the selected items will be displayed, also notice that each item will an ‘x’ that will call the remove function when clicked.

Lastly we have to do the styling, in this example I’ve used the following css to adjust how the selected items are displayed, but feel free to do as you like.

	border:solid #4CAF50 1px;
	padding:2px 15px;
.selected a{

That’s it guys! With just a few changes we can now select multiple items with our autocomplete, just leave a comment if you have any doubts.

Recommended for you

Angular2 Forms Tutorial: Creating Custom Validators Every now and then developers come across situations where existing validators are not suitable for their needs, if you are facing this situation your best option is to create a custom validatior, to illustrate how you can do that in angular2 I'm going to create a simple custom validator that will v...
Interacting with Child Components in Angular2 There are lots of situations where we have to divide a component into several sub-components, resulting in a parent with N child components that somehow have to interact with the parent, like for example a menu component like this: In this case the menu-componen...
Angular2 Tutorial: Developing a Realtime Chat App Angular 2 Chat Application Hi guys, today we're going to make an awesome chat application with Angular2, NodeJS and, this tutorial will involve quite a lot of things, and there are also lots of small details, so it will be a little bit longer than usual. To easily understand and make t...
Tutorial: Angular 2 Datatable with Sorting, Filtering and Resizable Columns In this tutorial I'm going to show you one of the datatable solutions available for Angular 2, it's called ag-Grid and it's available not only for angular2, but also for other frameworks like Angular 1 and React. It's a really complete datatable, it has lots of features that I definitely want to exp...

14 comments on “Adding the Multiselect feature to an Angular2 Autocomplete

  1. mike

    how is it going to work on the initial load when you have selected items already?
    You wanted to update the selected items with existing selected list. this is not going to work. can you show some example or update this example for update.

  2. priya

    Thanks a lot for this post!!
    My multiselect is working as shown in demo.But i am facing one issue when list get displayed all below controls get shifted.I want it should behaviour like dropdown.
    so to solve above issue I change code as


    But now I am not able to get selected value due to Datalist..

  3. Tushar

    Thank You for your efforts!!! Could you please suggest how to show the selected items in the same input box like you have in single select example?

  4. Alex

    Great articles! (this and the single autocomplete) I would love if you would like to do another article when the scenario is an autocomplete which handles an Array of Objects? Anyway, great job! Thanks.

  5. Hasan


    I am unable to show any element in my suggestion box other that the first one. Even though my filtered list has more than one element.

      filter() {
        if (this.query !== "") {
          this.filteredList = this.users.filter(function (el) {
            if(el["FirstName"].toLowerCase().search(this.query.toLowerCase()) &gt; -1 ||
              el["LastName"].toLowerCase().search(this.query.toLowerCase()) &gt; -1 ||
              el["Username"].toLowerCase().search(this.query.toLowerCase()) &gt; -1)
              return true;
        } else {
          this.filteredList = [];
        return false;
      select(item) {
        this.query = item;
        this.filteredList = [];
      this.users = [
            FirstName: 'Hasan',
            LastName: 'Jalal',
            Username: 'jalalh2'
            FirstName: 'Jasbir',
            LastName: 'Gill',
            Username: 'gill9'

    Please help.

  6. Jestin

    I find this multi-select really easy to implement and very easy to understand. But, I would need some help with the placement of the selected elements. Is there a way I can place the selected div in the input box which shows the multi-select dropdown ?

    Any help appreciated. Thanks.

  7. Tasfir Hossain Suman

    I am very new in angularjs i am trying to use this nice multiselect autocomplete but i can’t.
    Anyone can you give me a source code and is this javascript or typescript

Leave a Reply to Bishw Cancel reply

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

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>