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

| Input | Type | Defaut | Description | | ----- | ---- | ------ | ----------- | | autocomplete | BOOLEAN | FASLE | autocomplete entry with list | dropdown selection | | data | ANY[] | [] | data for the autocomplete list or dropdown list | | default | STRING | NULL | default selection | | key | STRING | NULL | property to use for list values (object type array) | | returnKey | STRING | NULL | property to use for return values (object type array) | | label | STRING | NULL | Label for input | | placeholder | STRING | NULL | Label for placeholder (autocomplete input) | | acceptInput | BOOLEAN | FALSE | Allow for custom entry and return value | | sortAlpha | BOOLEAN | FALSE | sort in alphabetical order | | required | BOOLEAN | FALSE | validation required | | disabled | BOOLEAN | FASLE | diable control | | style | STRING | NULL | styles to apply to formfield/select | | minLen | NUMBER | NULL | sets the min length of field | | maxLen | NUMBER | NULL | sets the max length of field | | prefix | STRING | NULL | sets a prefix string for an input field | | appearence | STRING | NULL | input style |

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))

  }