Datastop.io Auto-Complete Textbox

Datastop.io Auto-Complete Textbox contains multiple auto-complete (type-ahead) components which can be used in data entry forms or for filtering in UIs.

`Angular Material`

Datastop.io Auto-Complete Textbox components are built following Angular Material's Auto-Complete functionality

`Data Sources`

The following auto-complete widgets are defined:

* Institutions (universities and colleges based on IPEDS)
* Locations (city, state and/or zip code)
* Majors (college degrees - based on CIP Codes)
* Occupations (ONET occupations)

Data sources for each auto-complete widget:

$3

Institutitons (colleges/universities) are sourced from IPEDS.

$3

Locations (city, state zipcode) allow user to find City/State location based on filtering using zipCode or city name.

$3

Majors are CIP Codes from Department of Ed's IPEDS.

$3

Occupations are built from Burning Glass SubOccupations. SubOccupations are refinements in ONET classifications

Implementation Example

 typescript
  // app.module.ts
  import { AutoCompleteTextboxModule } from '@vantage-point/auto-complete-textbox';
  @NgModule
  (
    {
      imports:
        [
          ...
          AutoCompleteTextboxModule,
          ...
        ]
    }
  )
  export class AppModule { }
  // app.component.ts
  import { AutoCompleteTypeEnum, AutoCompleteModel } from '@vantage-point/auto-complete-textbox';
  @Component({
    ...
  })
  export class AppComponent implements OnInit
  {
    formGroup: FormGroup;
    autoCompleteType: typeof AutoCompleteTypeEnum = AutoCompleteTypeEnum;
    selectedOccupation: AutoCompleteModel;
    constructor
    (
      private formBuilder: FormBuilder
    ) { }
    ngOnInit(): void
    {
      this.selectedOccupation =
      {
        id: "43-3071.00",
        name: "Foreign Banknote Teller"
      };
      this.formGroup = this.formBuilder.group
      (
        {
          location: new FormControl(null, [ Validators.required ]),
          occupation: new FormControl(this.selectedOccupation, [ Validators.required ]),
        }
      );
    }
    onFormSubmit()
    {
      // NOTE: THIS IS IMPORTANT BECAUSE IT TRIGGERS TOUCH EVENT ON AUTO-COMPLETE COMPONENTS
      this.formGroup.markAllAsTouched();
      console.log(this.formGroup.value);
    }
  }

// app.component.html
  
Location

                      [touched]="formGroup.get('location').touched"
                    [autoCompleteType]="autoCompleteType.Location"
                    [label]="'search for location'"
                    [formFieldAppearance]="'outline'">

  
Occupation

                      [touched]="formGroup.get('occupation').touched"
                    [autoCompleteType]="autoCompleteType.Occupation"
                    [label]="'search for an occupation'">


Development Information
Component Inputs

 typescript
  @Input() autoCompleteType: AutoCompleteTypeEnum;
  @Input() apiUrl: string;
  @Input() label: string;
  @Input() shouldLabelFloat: boolean;
  @Input() placeholder: string;
  @Input() isRequired: boolean;
  @Input() errorMessage: string;
  @Input() formFieldAppearance: string;
  @Input() svgSearchIconName: string;
  @Input() svgCloseIconName: string;
  @Input() touched: boolean;

autoCompleteType (this is a required input)


@Input() autoCompleteType: AutoCompleteTypeEnum


This identifies which type of type-ahead is used.  Valid values are:
- Institution (AutoCompleteTypeEnum.Institution)
- Location (AutoCompleteTypeEnum.Location)
- Major (AutoCompleteTypeEnum.Major)
- Occupation (AutoCompleteTypeEnum.Occupation)
- Custom (AutoCompleteTypeEnum.Custom)

> NOTE: AutoCompleteTypeEnum.Custom allows you to provide your own apiURL endpoint via apiUrl input above..

apiUrl


@Input() apiUrl: string


Can only be used with AutoCompleteTypeEnum.Custom.

> NOTE: you can provide your own API url for use with Datastop.io Auto-Complete Textbox. By providing your own API, you are essenttially making the auto-complete a 'generic' auto-complete widget.

> By using your own API url, _YOU MUST ENSURE_ your API returns results matching AutoCompleteModel below, otherwise, unintended consequences will happen.

label


@Input() label: string;


The label you wish to use for auto-complete form element.

shouldLabelFloat


@Input() shouldLabelFloat: boolean;


Should label float 'always' float above input or not.

placeholder


@Input() placeholder: string;


The placeholder value for input.

isRequired


@Input() isRequired: boolean;


Is auto-complete control reqired.

errorMessage


@Input() errorMessage: string;


Custom error mmessage.

formFieldAppearance


@Input() formFieldAppearance: string;


The ability to influence the form field appearance based on Angular Material Design
valid options are:
- legacy
- standard
- fill
- outline

svgSearchIconName


@Input() svgSearchIconName: string;


Custom SVG icon replacing default search icon

svgCloseIconName


@Input() svgCloseIconName: string;


Custom SVG icon replacing default clear icon

touched


@Input() touched: boolean;


Used to mark auto-complete control as touched.  Used with reactive forms.

AutoCompleteModel[]

Each Datastop.io Auto-Complete Textbox component returns a common model named AutoCompleteModel.

`javascript export interface AutoCompleteModel { id: string; name: string; data?: {}; // not required }`

The auto-complete (type-ahead) results will contain results matching a search string input. Each record in the result will contain data matching the signature of AutoCompleteModel` above.

$3

> This is a string data type containing the unique identifier for the record. This value could be a number. It could also be a concatenated string representing a multi-part identifier.

$3

> This represents a textual value used in the drop down representing the record returned from API service.

$3

> This is a JSON object representing additional meta-data about the returned record. This could be data client app consumes.