free search select demo

this component is useful for letting users select something from a large list. in the example search box below, search for a country in Europe.

Template code [app.component.html]


  <input
    type="text"
    class="form-control"
    placeholder="Country"
    [formControl]="country"
    [appTypeahead]="typeahead"
    [displayWith]="displayFn">

  <app-typeahead #typeahead>
    <app-typeahead-option *ngFor="let country of (filteredCountries$ | async)" [value]="country" class="country">
      <img class="country-flag" [src]="country.flag">
      <span class="country-name">{{country.name}}</span>
      <span class="country-summary"><ng-container *ngFor="let alt of country.altSpellings; let last = last;">{{alt}}{{!last ? ', ' : ''}}</ng-container></span>
    </app-typeahead-option>
  </app-typeahead>

Component code [app.component.ts]



  ngOnInit(): void {
    this.country = new FormControl();

    this.countries$ = this.http.get(`assets/countries.json`)
      .map((response) => response.json())
      .share();

    this.filteredCountries$ = Observable.combineLatest(
      this.country.valueChanges.startWith(null),
      this.countries$
    )
      .map(([val, options]) => val ? this.filter(val, options) : options.slice());
  }

  displayFn(o) {
    return o && o.name;
  }

  private filter(value: string, options) {
    const v = value.toString().toLowerCase();
    return options.filter(
      (option) => option.name.toLowerCase().indexOf(v) !== -1
    );
  }