Skip to main content

​
Overview

The AutoComplete class provides an autocomplete input field with filtering capabilities. It supports both single and multiple selection modes and dynamically filters options as the user types.

​
Inheritance

ObjectBase → NodeBase → SelectableNode → AutoComplete

​
Constructor

new AutoComplete(
  id: string,
  placeholder?: string,
  value?: OptionChild[] | Promise<OptionChild[]> | Observable<OptionChild[]>,
  selected?: string,
  multiple?: boolean,
  singleLine?: boolean,
  icon?: string,
  errorMessage?: string,
  disabled?: boolean,
  validator?: Validator | AbstractControlOptions,
  asyncValidator?: AsyncValidatorFn,
  action?: Action | Action[]
)

​
Parameters

​
id
string
required
The unique identifier for the autocomplete node in the DOM.
​
placeholder
string
The placeholder text to display when no value is selected.
​
value
OptionChild[] | Promise<OptionChild[]> | Observable<OptionChild[]>
The options to display in the autocomplete. Can be an array, Promise, or Observable of OptionChild objects.
​
selected
string
The initial selected value(s) of the autocomplete.
​
multiple
boolean
default:"false"
Whether to allow multiple selections.
​
singleLine
boolean
default:"false"
Whether to display the node in a single line layout.
​
icon
string
Material icon name to display in the autocomplete field.
​
errorMessage
string
Custom error message to display when validation fails.
​
disabled
boolean
Whether the autocomplete is disabled.
​
validator
Validator | AbstractControlOptions
Synchronous validator function(s) or control options.
​
asyncValidator
AsyncValidatorFn
Asynchronous validator function(s) for the autocomplete.
​
action
Action | Action[]
Action(s) to execute when events occur on the autocomplete.

​
Properties

PropertyTypeDescription
idstringThe unique identifier for the node
placeholderstringThe placeholder text
type'autocomplete'The node type (read-only)
valueOptionChild[]The options available for selection
selectedValuestringThe currently selected value(s)
multiplebooleanWhether multiple selections are allowed
filteredOptionsBehaviorSubject<OptionChild[]>Observable of filtered options based on user input
singleLinebooleanWhether displayed in single line layout
iconstringMaterial icon name
errorMessagestringCustom error message
disabledbooleanWhether the node is disabled
validatorValidator | AbstractControlOptionsSynchronous validators
asyncValidatorAsyncValidatorFnAsynchronous validators
actionAction | Action[]Associated actions
hintstringHint text to display
autoFocusbooleanWhether to auto-focus on load

​
Methods

​
getOptions()

Returns the current list of options. 
getOptions(): OptionChild[]

​
getNativeElement()

Returns the native DOM element for this node. 
getNativeElement(): HTMLElement | null

​
Usage Example

import { AutoComplete, OptionChild } from '@ng-mdf/core';

// Single selection autocomplete with static options
const countryAutocomplete = new AutoComplete(
  'country',
  'Select your country',
  [
    new OptionChild('us', 'United States'),
    new OptionChild('ca', 'Canada'),
    new OptionChild('mx', 'Mexico'),
    new OptionChild('uk', 'United Kingdom'),
    new OptionChild('de', 'Germany')
  ],
  'us',  // preselected value
  false  // single selection
);

// Multiple selection autocomplete with async options
const skillsAutocomplete = new AutoComplete(
  'skills',
  'Select your skills',
  fetchSkillsFromAPI(),  // returns Promise<OptionChild[]>
  undefined,
  true  // multiple selection
);

// Autocomplete with Observable options
import { of } from 'rxjs';

const tagAutocomplete = new AutoComplete(
  'tags',
  'Add tags',
  of([
    new OptionChild('angular', 'Angular'),
    new OptionChild('typescript', 'TypeScript'),
    new OptionChild('rxjs', 'RxJS')
  ]),
  undefined,
  true
);

​
Special Features

​
Filtered Options

The filteredOptions property is a BehaviorSubject that automatically updates as the user types, providing real-time filtering of available options. Subscribe to this observable to react to filtered option changes: 
autocomplete.filteredOptions.subscribe(filtered => {
  console.log('Filtered options:', filtered);
});

​
Async Data Loading

The autocomplete supports loading options asynchronously via Promises or Observables, making it ideal for fetching data from APIs: 
const asyncAutocomplete = new AutoComplete(
  'users',
  'Search users',
  fetch('/api/users').then(res => res.json())
);
  • Dropdown - Similar selection interface without filtering
  • RadioGroup - For mutually exclusive selections with visible options
  • SelectableNode - Base class for all selection nodes

Build docs developers (and LLMs) love

Get started for freeTalk to us