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