Put Input Inside Select

Input text Field inside ` select ` tag

Dealing with the <select> nightmare

From the Docs:

<select> Element Technical summary¹

Permitted content: Zero or more <option> or <optgroup> elements.

Tag omission: None, both the starting and ending tag are mandatory.

Permitted parents: any element that accepts phrasing content

The short answer is that <input> elements can not be placed inside <select> elements.

<datalist> Element²

The datalist element is intended to provide a better mechanism for this concept.

<input type="text" name="example" list="exampleList">

<datalist id="exampleList">

  <option value="A">  

  <option value="B">

</datalist>

Input inside Select Angular

You can use the idea of 'autocomplete' control.

angular material provides an autoComplete component that contains a select with input:

The autocomplete is a normal text input enhanced by a panel of suggested options.

HTML CODE:

<form class="example-form">
  <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Number</mat-label>
    <input type="text"
           placeholder="Pick one"
           aria-label="Number"
           matInput
           [formControl]="myControl"
           [matAutocomplete]="auto">
    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

TS CODE:

import {Component, OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';

/**
 * @title Highlight the first autocomplete option
 */
@Component({
  selector: 'autocomplete-auto-active-first-option-example',
  templateUrl: 'autocomplete-auto-active-first-option-example.html',
  styleUrls: ['autocomplete-auto-active-first-option-example.css'],
})
export class AutocompleteAutoActiveFirstOptionExample implements OnInit {
  myControl = new FormControl('');
  options: string[] = ['One', 'Two', 'Three'];
  filteredOptions: Observable<string[]>;

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value || '')),
    );
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();

    return this.options.filter(option => option.toLowerCase().includes(filterValue));
  }
}

CSS:

.example-form {
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}

.example-full-width {
  width: 100%;
}

HTML select form with option to enter custom value

HTML5 has a built-in combo box. You create a text input and a datalist. Then you add a list attribute to the input, with a value of the id of the datalist.

Update: As of March 2019 all major browsers (now including Safari 12.1 and iOS Safari 12.3) support datalist to the level needed for this functionality. See caniuse for detailed browser support.

It looks like this:

<input type="text" list="cars" />

<datalist id="cars">

  <option>Volvo</option>

  <option>Saab</option>

  <option>Mercedes</option>

  <option>Audi</option>

</datalist>

How to add input text in select option dropdown

You can try <datalist>:

The HTML <datalist> element contains a set of elements that represent the values available for other controls.

<input list="select" name="select">

<datalist class="form-control" id="select">    

  <option value="Trans"/>

  <option value="Fund"/>

  <option value="Insta"/>

</datalist>

---

Related Topics