Datastop.io Autocomplete Library

This project was generated with Angular CLI version 9.0.5.

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

`Angular Material`

Datastop.io Autocomplete Library 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

Development Information

Component Inputs

  @Input() apiUrl: string;
  @Input() searchTerm: string;
  @Input() selectedSearchResultModel: SearchResultModel;
  @Input() label: string;
  @Input() formFieldAppearance: string;

`apiUrl`

@Input() apiUrl: string

Each Datastop.io Autocomplete Library component has its own default API developed against data sources outlined above.

NOTE: you can provide your own API for any of the auto-completes above. This will override the default API. By providing your own API, you are essenttially making the auto-complete a 'generic' auto-complete widget.

By using your own API, YOU MUST ENSURE your API returns results matching SearchResultModel below, otherwise, unintended consequences will happen.

`searchTerm`

@Input() searchTerm: string

This is the search string input used by API to do a search.

`selectedSearchResultModel`

@Input() selectedSearchResultModel: SearchResultModel;

The SearchResultModel representing the selected record used to preselect the record in drop down.

`label`

@Input() label: string;

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

`formFieldAppearance`

@Input() formFieldAppearance: string;

The ability to influence the form field appearance based on Angular Material Design

Component Outputs

@Output('onSelection') searchResultSelectionEventEmitter: EventEmitter<SearchResultModel> = new EventEmitter<SearchResultModel>();

`SearchResultModel[]`

Each Datastop.io Autocomplete Library component returns a common model named SearchResultModel.

export interface SearchResultModel
{
  id: string;
  name: string;
  data: {};
}

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