autocomplete-entry
TypeScript icon, indicating that this package has built-in type declarations

3.4.7 • Public • Published

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

  }

Package Sidebar

Install

npm i autocomplete-entry

Weekly Downloads

1

Version

3.4.7

License

ISC

Unpacked Size

131 kB

Total Files

14

Last publish

Collaborators

  • wavecoders