Multiple select Dropdown using Angular with <input> tag

Question

I am building up angular 6 application, in which i am in the need to make a multi select dropdown using <input> text box without using <select>.

Html:

<form>
  Select User: <input type="text" name="user" [value]="users"><br>
  <button type="submit"> Submit </button>
</form>

Ts:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    users = ['First User', 'Second User', 'Third User', 'Fourth User'];
}

I also need to do it using Pure Javascript, Tpescript, and also Without third party or jquery.

Also recommended not to use html datalist.

I have a lot of search for it but couldn't find a proper solution for it. Kindly help me to achieve the result.

Stackblitz: https://stackblitz.com/edit/angular-v7kmbq

Solution 1

Here is the working code, I used [(ngModel)] instead formcontrols:

https://stackblitz.com/edit/angular-qjrhs5?file=src%2Fapp%2Fapp.component.css

Solution 2

Check this StackBlitz: Dropdown Example

HTML file:

<button type="button" (click)="clear()">Clear</button>

<div class="autocomplete">
    <input name="suggestion" type="text" placeholder="User" (click)="suggest()" [formControl]="typeahead">

    <div class="autocomplete-items" *ngIf="show">
      <div *ngFor="let s of suggestions" (click)="selectSuggestion(s)">{{ s }}</div>
    </div>
</div>

TS file:

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  suggestions: string [] = [];
  suggestion: string;
  show: boolean = false;
  typeahead: FormControl = new FormControl();

  fieldHistory: string [] = [];

  suggest() {
    this.suggestions = this.users;
    this.show = true;
  }

  selectSuggestion(s) {
      this.suggestion = "";

      var index = this.fieldHistory.findIndex(function(element) {
          return element === s;
      });

      if (index === -1) {
          this.fieldHistory.push(s);
      } else {
          var firstPart = this.fieldHistory.slice(0, index);
          var secondPart = this.fieldHistory.slice(++index);

          this.fieldHistory = firstPart.concat(secondPart);
      }

      for (let i = 0; i < this.fieldHistory.length; i++) 
           this.suggestion = this.suggestion + " " + this.fieldHistory[i];

      this.typeahead.patchValue(this.suggestion);
      this.show = false;
  }

  clear() {
      this.suggestion = "";
      this.fieldHistory.pop();

      for (let item of this.fieldHistory) 
          this.suggestion = this.suggestion + " " + item;

      this.typeahead.patchValue(this.suggestion);
  }

  users = ['First User', 'Second User', 'Third User', 'Fourth User'];
}

CSS file:

.autocomplete {
    position: relative;
    width: 100%;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    margin-top: 15px;
    top: 100%;
    left: 0;
    right: 0;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover {
    background-color: #e9e9e9; 
}

Also import the module: import { ReactiveFormsModule } from '@angular/forms';

Comments

[Maniraj Murugan]

Edited in question..

[Amit Chigadani]

@Ploppy Aren't they both the same thing?

[Maniraj Murugan]

As i am new to this scenario, hope experienced can help me in this..

[Krishna Rathore]

Hi @ManiRaj do you want to like this? jsfiddle.net/5Q552/1

[fransyozef]

Just to be curious. Why don't you use the select tag? Perhaps this is helpful also : github.com/hannaholl/angular-input-dropdown

[Maniraj Murugan]

Welcome for your solution, but question is about multiselect.. I am able to select only one value as per your solution..

[Juan]

@ManiRaj answer updated. Now you can choose various options.

[Maniraj Murugan]

Is there any possibility to add delete here, when user selected the wrong values?

[Maniraj Murugan]

Is there any possibility to add delete here, when user selected the wrong values?

[Maniraj Murugan]

Not fully but one by one, If the user select first user, second user, fourth user and he wants to delete the fourth user and wants to add third user and then later he can add fourth user.. In simple if user selects the wrong value he can delete that.

[Bhimashankar Mantur]

ya, you can do anything, for this you might need to change the list structure

[Juan]

@ManiRaj answer updated. Now you can delete items with the clear button.

[Maniraj Murugan]

But its not possible to clear individually each item? Because here user needs to clear lot if he wants to delete the first selected value.. Delete for each individual item in the list would be better to delete the user needed..

[Bhimashankar Mantur]

I have updated the code you can check in the same link

[Maniraj Murugan]

Like this is what i needed jsfiddle.net/amLfqr6u. On select a item then delete inside the input box.

[Maniraj Murugan]

I am in the need of remove option inside the input box as i am storing the values inside the input box..

[Bhimashankar Mantur]

please check again, hope its what you want

[Maniraj Murugan]

Yes almost done.. Thanks for your valuable time and help for making the solution as per my need..

[Juan]

@ManiRaj I modified the code so now you can remove individual items when you click them again in the list options. See stackblitz.

[Maniraj Murugan]

Did you updated in stackblitz? Because i could able to see only the older solution in the link in your solution.

[Juan]

Yes, it's updated but the appearance of the ui is the same. To remove items you have to click again on them in the options list.

[Maniraj Murugan]

Oh but in the another solution i got the thing actually i am in the need.. Anyhow thanks for your valuable time and help for me..