javascript - Multiple select Dropdown using Angular with <input> tag - Stack Overflow

admin管理员组

文章数量:1302272

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: './appponent.html',
  styleUrls: [ './appponent.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 remended 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:

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.ponent.html',
  styleUrls: [ './app.ponent.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 remended 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./edit/angular-v7kmbq

• javascript
• html
• angular
• typescript
• multi-select

Share Follow edited Aug 22, 2018 at 12:21 Maniraj Murugan asked Aug 22, 2018 at 8:48 Maniraj MuruganManiraj Murugan 9,0842323 gold badges7373 silver badges122122 bronze badges 5

• Edited in question.. – Maniraj Murugan Commented Aug 22, 2018 at 8:56
• @Ploppy Aren't they both the same thing? – Amit Chigadani Commented Aug 22, 2018 at 8:59
• As i am new to this scenario, hope experienced can help me in this.. – Maniraj Murugan Commented Aug 22, 2018 at 9:01
• Hi @ManiRaj do you want to like this? jsfiddle/5Q552/1 – Krishna Rathore Commented Aug 22, 2018 at 9:02
• Just to be curious. Why don't you use the select tag? Perhaps this is helpful also : github./hannaholl/angular-input-dropdown – fransyozef Commented Aug 22, 2018 at 9:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

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

Check this StackBlitz: Dropdown Example

HTML file:

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

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

    <div class="autoplete-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.ponent.html',
  styleUrls: [ './app.ponent.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:

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

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

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

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

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

本文标签： javascriptMultiple select Dropdown using Angular with ltinputgt tagStack Overflow