autocomplete-entry v3.4.7

Autocomplete

This Material autocomplete and dropdown combined allowing you to use ether types. There are many options available as to how to display the dropdown or autocomplete behaviours. Data may be an Observable or not.

Now supports closest match!

Intsallation

npm install autocomplete-entry

Inputs

The following Inputs are available

FormControl

For a formControl you will need to provide controls for - country, region, city

formControlName="country"

 countrySelection = this.fb.group({
    country: [null],
  })

Options

<div style="margin: 24px;" [formGroup]="selection">

  <app-autocomplete-selection
    [autocomplete]="false"
    [data]="autocompleteList"
    [default]="'Canada'"
    [key]="'name'"
    [returnKey]="'abbr'"
    [displayInput]="'name'"
    [label]="'Country'"
    [acceptInput]="true"
    [placeholder]="'Canada'"
    [sortAlpha]="true"
    [required]="true"
    [disabled]="false"
    [minLength]="3"
    [maxLength]="10"
    formControlName="country"
  >
  </app-autocomplete-selection>

</div>

Data

Provide the data ether as an Observable or Static data as an array of objects

autocompleteList = [
  { name: 'United States', id: 1, abbr: 'US'},
  { name: 'Italy', id: 1, abbr: 'IT'},
  { name: 'Canada', id: 1, abbr: 'CA'},
]

Or you can provide an array of strings

autocompleteList = ['United States', 'Italy', 'Canada']

Sample Implementation

selection: formGroup

constructor(
  private fb: FormBuilder
  ) {}

ngOnInit() {

  selection = this.fb.group({
    country: [null]
  })

  this.selection.patchValue({ country: 'Canada'})
  this.selection.valueChanges.subscribe(data => console.log(data))

  }