Angular Material Autocomplete Dropdown Component

Angular Material Autocomplete is a standard mat autocomplete wrapper, designed to simplify and reduce work with autocomplete inputs.

It extends the traditional behavior with new functionality such as binding a form control, fetching from an API service or dataset, prefetching items on start, loading animations, and rendering templates for options in the menu.

Must Read: jQuery Plugin for Interactive Multi-Select & Autocomplete Dropdown Lists

How to make use of it:

Install the package via npm:

npm install @vguleaev/angular-material-autocomplete

Requires installation of angular material.

npm install @angular/material @angular/cdk

import module with:

import { NgMatAutocompleteModule } from '../../node_modules/@vguleaev/angular-material-autocomplete';

Use the component somewhere in the html template.

<ng-mat-autocomplete> </ng-mat-autocomplete>


Must Read: [Bootstrap 5] Autocomplete Functionality for Input Fields in Vanilla Javascript

Required attributes are marked as bold text.

source and displayItem or displayItemFn are required attributes.

AttributeDefault ValueDescription
sourcenullThe source can be a simple any[ ] or service that implements ‘AutocompleteService’ interface.

If the source is a service, every key press component will call a service.fetch(params) method and return a Promise.
Argument params is an object of type HttpParams that will contain one single param called “query” having current input value. Any additional params can be passed with serviceParams attribute.

If the source is an array, a local filter is done. The result of displayItem or displayItemFn functions (which is a string) is checked if it contains an input value.
displayItem‘’String. This string will be evaluated with eval() a function to show formatted value in autocomplete suggestions list. Often result data is an array of objects. If you want to display some property use 'item.myprop' string. The ‘item’ word is required.

When the search is done via service, search logic is done on the server. When the source is an array, search logic is simply comparing strings. Result of the displayItem/displayItemFn input value will be compared. Eval function is dangerous and error-prone. Better use displayItemFn which is a function.
displayItemFnnullFunction. If not null displayItemFn will be used instead of displayItem string to show the item in autocomplete list. Example of display function:
(country: string) => + country.code
displayTemplatenullShould be a value of type TemplateRef. When this value is not null an HTML template will be rendered for each option in autocomplete list.

Please note that the search is done by comparing input value with displayItem or displayItemFn executing result.
serviceParamsnullShould be a value of type HttpParams. This params together with the ‘query’ param will be passed to a service fetch function.
floatLabel“auto”Type of FloatLabelType. Set label floating behavior. Can be ‘always’ or ‘never’ or ‘auto’.
placeholder“Search”Text for placeholder.
minChars2A number of minimum chars are required to start the search. The default is 2. Set it to 0 if you want all the values available on empty input.
doPrefetchfalseShould be boolean. When active, a prefetch is done on component initialization. Requires a service in the source. After the prefetch is done, the result is stored in memory, and the search is done on the local array.
clearAfterSearchfalseBoolean. When active, input clears after the item is selected.
hasProgressBarfalseBoolean. When active, shows a loading bar under input. Animation displays while the request is done. Works only when the source is set up as a service.
hasSearchButtonfalseBoolean. Shows a search button near the input. When the button is pressed s force search is done. Even if minChars value is bigger than the current input text length, this button will start the search.
(optionSelected)eventOutput event. Clicking on any suggested option will raise this event. The event returns the currently selected option as a param.
showAddNewfalseBoolean. When active, shows a create button when no suggestions are found.
addNewText“Add new”String. Text to display near create button.
(createNew)eventOutput event. Clicking on create new button raises this event and passes the current input value as the event param.
transformResultx: any[] => xFunction. Is used to format data returned from the server. Used only when the source is a service.
validationErrors[ ]String[ ]. Every string in the array displays as mat-error under input.
isFocusedfalseBoolean. Sets the focus on autocomplete on component init.
Please note that on focus search is triggered.


A jQuery AJAX-Compatible Input Autocomplete Plugin | autocompleter
Progressive and Customizable Autocomplete JavaScript Library | horsey.js

See Demo And Download

Official Website(vguleaev): Click Here

This superior jQuery/javascript plugin is developed by vguleaev. For extra Advanced Usage, please go to the official website.