Notorious Puppy Memes

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

    Install

    npm i autocomplete-entry

    DownloadsWeekly Downloads

    1

    Version

    3.4.7

    License

    ISC

    Unpacked Size

    131 kB

    Total Files

    14

    Last publish

    Collaborators

    • wavecoders