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.