AutoCompleteModel

23 Sep 202511 minutes to read

Interface for a class AutoComplete

Properties

actionBegin EmitType<Object>

Triggers before fetching data from the remote server.

actionComplete EmitType<Object>

Triggers after data is fetched successfully from the remote server.

actionFailure EmitType<Object>

Triggers when the data fetch request from the remote server fails.

beforeOpen EmitType<Object>

Triggers when the popup before opens.

blur EmitType<Object>

Triggers when focus moves out from the component.

change EmitType<ChangeEventArgs>

Triggers when an item in a popup is selected or when the model value is changed by user.
Use change event to
Configure the Cascading DropDownList

close EmitType<PopupEventArgs>

Triggers when the popup is closed.

created EmitType<Object>

Triggers when the component is created.

customValueSpecifier EmitType<CustomValueSpecifierEventArgs>

Triggers on set a
custom value to this component.

dataBound EmitType<Object>

Triggers when data source is populated in the popup list..

destroyed EmitType<Object>

Triggers when the component is destroyed.

filtering EmitType<FilteringEventArgs>

Triggers on typing a character in the component.

focus EmitType<Object>

Triggers when the component is focused.

open EmitType<PopupEventArgs>

Triggers when the popup opens.

resizeStart EmitType<Object>

Triggers when the user starts resizing the DropDown popup.

resizeStop EmitType<Object>

Triggers when the user finishes resizing the DropDown popup.

resizing EmitType<Object>

Triggers continuously while the DropDown popup is being resized by the user.
This event provides live updates on the width and height of the popup.

select EmitType<SelectEventArgs>

Triggers when an item in the popup is selected by the user either with mouse/tap or with keyboard navigation.

actionFailureTemplate string|Function

Accepts the template and assigns it to the popup list content of the component
when the data fetch request from the remote server fails.

allowCustom boolean

Specifies whether the component allows user defined value which does not exist in data source.

allowObjectBinding boolean

Defines whether the object binding is allowed or not in the component.

allowResize boolean

Gets or sets a value that indicates whether the DropDownList popup can be resized.
When set to true, a resize handle appears in the bottom-right corner of the popup,
allowing the user to resize the width and height of the popup.

autofill boolean

Specifies whether suggest a first matched item in input when searching. No action happens when no matches found.

cssClass string

Sets CSS classes to the root element of the component that allows customization of appearance.

dataSource { : }[]|DataManager|string[]|number[]|boolean[]

Accepts the list items either through local or remote service and binds it to the component.
It can be an array of JSON Objects or an instance of
DataManager.

debounceDelay number

Specifies the delay time in milliseconds for filtering operations.

enablePersistence boolean

Enable or disable persisting component’s state between page reloads.
If enabled, following list of states will be persisted.

  1. value

enableRtl boolean

Enable or disable rendering component in right to left direction.

enableVirtualization boolean

Defines whether to enable virtual scrolling in the component.

enabled boolean

Specifies a value that indicates whether the component is enabled or not.

fields FieldSettingsModel

The fields property maps the columns of the data table and binds the data to the component.

  • text - Maps the text column from data table for each list item
  • value - Maps the value column from data table for each list item
  • iconCss - Maps the icon class column from data table for each list item
  • groupBy - Group the list items with it’s related items by mapping groupBy field
  <ejs-autocomplete [placeholder]="placeholder" [fields]="fields" [dataSource]="dataSource"></ejs-autocomplete>
  import { Component, ViewEncapsulation } from '@angular/core';

  @Component({
    selector: 'app-root',
    styleUrls: ['app.component.css'],
    templateUrl: 'app.component.html',
    encapsulation: ViewEncapsulation.None
  })
  export class AppComponent {
    constructor() {}
    public fields =  { value: 'Name' };
    public placeholder = "e.g. Australia";
    public dataSource: { [key: string]: Object; }[] = [
    { Name: "Australia", Code: "AU" },
    { Name: "Bermuda", Code: "BM" },
    { Name: "Canada", Code: "CA" },
    { Name: "Cameroon", Code: "CM" },
    { Name: "Denmark", Code: "DK" }
  ];
  }

For more details about the field mapping refer to Data binding documentation.

filterType FilterType

Determines on which filter type, the component needs to be considered on search action.
The available FilterType
and its supported data types are

FilterType
 Description
 Supported Types
StartsWith
 Checks whether a value begins with the specified value.
 String
EndsWith
 Checks whether a value ends with specified value.
String
Contains
 Checks whether a value contains with specified value.
String

The default value set to Contains, all the suggestion items which contain typed characters to listed in the suggestion popup.

floatLabelType FloatLabelType

Specifies whether to display the floating label above the input element.
Possible values are:

  • Never: The label will never float in the input when the placeholder is available.
  • Always: The floating label will always float above the input.
  • Auto: The floating label will float above the input after focusing or entering a value in the input.

footerTemplate string|Function

Accepts the template design and assigns it to the footer container of the popup list.

For more details about the available template options refer to Template documentation.

groupTemplate string|Function

Accepts the template design and assigns it to the group headers present in the popup list.

headerTemplate string|Function

Accepts the template design and assigns it to the header container of the popup list.

For more details about the available template options refer to Template documentation.

highlight boolean

When set to ‘true’, highlight the searched characters on suggested list items.

For more details about the highlight refer to Custom highlight search documentation.

htmlAttributes { : }

Allows additional HTML attributes such as title, name, etc., and
accepts n number of attributes in a key-value pair format.

 <ejs-autocomplete [htmlAttributes]="htmlAttributes" [placeholder]="placeholder" [fields]="fields" [dataSource]="dataSource"></ejs-autocomplete>
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  styleUrls: ['app.component.css'],
  templateUrl: 'app.component.html',
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  constructor() {}
  public htmlAttributes = { name: "country", maxlength: "2", title: "AutoComplete" };
  public placeholder = "e.g. Australia";
  public fields =  { value: 'Name' };
  public dataSource: { [key: string]: Object; }[] = [
  { Name: "Australia", Code: "AU" },
  { Name: "Bermuda", Code: "BM" },
  { Name: "Canada", Code: "CA" },
  { Name: "Cameroon", Code: "CM" },
  { Name: "Denmark", Code: "DK" }
];
}

ignoreAccent boolean

ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.

ignoreCase boolean

When set to ‘false’, consider the case-sensitive
on performing the search to find suggestions.
By default consider the casing.

isDeviceFullScreen boolean

Defines whether the popup opens in fullscreen mode on mobile devices when filtering is enabled. When set to false, the popup will display similarly on both mobile and desktop devices.

itemTemplate string|Function

Accepts the template design and assigns it to each list item present in the popup.
We have built-in template engine
which provides options to compile template string into a executable function.
For EX: We have expression evolution as like ES6 expression string literals.

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

minLength number

Allows you to set [`the minimum search character length’]
(../../auto-complete/filtering#limit-the-minimum-filter-character),
the search action will perform after typed minimum characters.

noRecordsTemplate string|Function

Accepts the template design and assigns it to popup list of component
when no data is available on the component.

placeholder string

Specifies a short hint that describes the expected value of the DropDownList component.

popupHeight string|number

Specifies the height of the popup list.

For more details about the popup configuration refer to
Popup Configuration documentation.

popupWidth string|number

Specifies the width of the popup list. By default, the popup width sets based on the width of
the component.

For more details about the popup configuration refer to
Popup Configuration documentation.

query Query

Accepts the external query
that execute along with data processing.

 <ejs-autocomplete [placeholder]="placeholder" [query]="query" [fields]="fields" [dataSource]="dataSource"></ejs-autocomplete>
import { Component, ViewEncapsulation } from '@angular/core';
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';

@Component({
  selector: 'app-root',
  styleUrls: ['app.component.css'],
  templateUrl: 'app.component.html',
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  constructor() {}
  public dataSource: DataManager = new DataManager({
    url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
    adaptor: new ODataV4Adaptor,
    crossDomain: true
  });
  // maps the appropriate column to fields property
  public fields: Object = { value: 'ContactName' };
  //bind the Query instance to query property
  public query: Query = new Query().select(['ContactName']).take(6);
  //set the placeholder to AutoComplete input
  public placeholder: string = "Find a customer";
}

readonly boolean

When set to true, the user interactions on the component are disabled.

showClearButton boolean

Specifies whether to show or hide the clear button.
When the clear button is clicked, value, text, and index properties are reset to null.

showPopupButton boolean

Allows you to either show or hide the popup button on the component.

sortOrder SortOrder

Specifies the sortOrder to sort the data source. The available type of sort orders are

  • None - The data source is not sorting.
  • Ascending - The data source is sorting with ascending order.
  • Descending - The data source is sorting with descending order.

suggestionCount number

Supports the specified number
of list items on the suggestion popup.

value number|string|boolean|object|null

Gets or sets the value of the selected item in the component.

width string|number

Specifies the width of the component. By default, the component width sets based on the width of
its parent container. You can also set the width in pixel values.

zIndex number

specifies the z-index value of the component popup element.