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