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