autocomplete-entry

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

  }