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:

Institutions

Institutitons (colleges/universities) are sourced from IPEDS.

Locations

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

Majors

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

Occupations

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

Implementation Example

  // 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
<form [formGroup]="formGroup" (ngSubmit)="onFormSubmit()">

  <h3>Location</h3>
  <vp-auto-complete formControlName="location"
                    [touched]="formGroup.get('location').touched"
                    [autoCompleteType]="autoCompleteType.Location"
                    [label]="'search for location'"
                    [formFieldAppearance]="'outline'"></vp-auto-complete>


  <h3>Occupation</h3>
  <vp-auto-complete formControlName="occupation"
                    [touched]="formGroup.get('occupation').touched"
                    [autoCompleteType]="autoCompleteType.Occupation"
                    [label]="'search for an occupation'"></vp-auto-complete>

</form>

Development Information

Component Inputs

  @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.

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.

id

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.

name

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

data?

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