This project was generated with Angular CLI version 9.0.5.

Usage no npm install needed!

<script type="module">
  import vantagePointAutocompleteLibrary from 'https://cdn.skypack.dev/@vantage-point/autocomplete-library';


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:


Institutitons (colleges/universities) are sourced from IPEDS.


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


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


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;


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


@Input() searchTerm: string

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


@Input() selectedSearchResultModel: SearchResultModel;

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


@Input() label: string;

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


@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>();


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.


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.


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


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