Multiple Columns in Angular AutoComplete

22 Mar 20224 minutes to read

The Autocomplete allows list of data to be displayed in several columns and column collection can be defined and customized through the multiColumnSettings property.

In AutoComplete Multiple Column search is based on searchColumnIndices property which allows user to search text for any number of fields in the suggestion list without modifying the selected text format.

In AutoComplete Multiple Column searched value is updated to autocomplete input box based on stringFormat property which specifies column indices values to updated.

NOTE :NOTE: 1. stringFormat as “{0} ({1})” means search based on 0, 1 and 2 columns data.
2. If searchColumnIndices given as [0,1,2], then the column search will done using 0,1,2 column data alone.

Name	Description
multiColumnSettings.enable	Allow list of data to be displayed in several columns.
multiColumnSettings.showHeader	Allow header text to be displayed in corresponding columns.
multiColumnSettings.stringFormat	Displayed selected value and autocomplete search is based on mentioned column value specified in that format.
multiColumnSettings.columns	Field and Header Text collections can be defined and customized through this field.
multiColumnSettings.columns.field	Get or set a value that indicates to display the columns in the autocomplete mapping with column name of the dataSource.
multiColumnSettings.columns.headerText	Get or set a value that indicates to display the title of that particular column.
multiColumnSettings.columns.cssClass	Used to set the user defined cssClass for the particular column
multiColumnSettings.columns.type	Used to define the data type for a particular column
multiColumnSettings.columns.filterType	Used to set the search filter type for the column
multiColumnSettings.columns.headerTextAlign	Used to align or position the header value in the column
multiColumnSettings.columns.textAlign	Used to align or position all the values in a column

HTML

                  <input type="text" id="automulticolumn" ej-autocomplete [dataSource]="multicolumndataList" fields="multicolumnfields" watermarkText="Select a Order"
                            [highlightSearch]="true" [showPopupButton]="true" [multiColumnSettings]="multicolumncolset" width="500"/>

JS

export class AppComponent {
     multicolumndataList: Array<any>;
    multicolumncolset: Object;
    multicolumnfields: Object;
    value: string;
    constructor() {
        this.multicolumndataList = [{ 'EmployeeID': 1, 'FirstName': 'Nancy', 'City': 'Seattle' },
        { 'EmployeeID': 2, 'FirstName': 'Andrew', 'City': 'Tacoma' },
        { 'EmployeeID': 3, 'FirstName': 'Janet', 'City': 'Kirkland' },
        { 'EmployeeID': 4, 'FirstName': 'Margaret', 'City': 'Redmond' },
        { 'EmployeeID': 5, 'FirstName': 'Steven', 'City': 'London' },
        { 'EmployeeID': 6, 'FirstName': 'Michael', 'City': 'London' },
        { 'EmployeeID': 7, 'FirstName': 'Robert', 'City': 'London' },
        { 'EmployeeID': 8, 'FirstName': 'Laura', 'City': 'Seattle' },
        { 'EmployeeID': 9, 'FirstName': 'Anne', 'City': 'London' },
        { 'EmployeeID': 10, 'FirstName': 'Laura', 'City': 'Seattle' },
        { 'EmployeeID': 11, 'FirstName': 'Janet', 'City': 'Kirkland' },
        { 'EmployeeID': 12, 'FirstName': 'Michael', 'City': 'London' },
        { 'EmployeeID': 13, 'FirstName': 'Steven', 'City': 'London' },
        { 'EmployeeID': 14, 'FirstName': 'Andrew', 'City': 'Tacoma' },
        { 'EmployeeID': 15, 'FirstName': 'Robert', 'City': 'London' },
        { 'EmployeeID': 16, 'FirstName': 'Margaret', 'City': 'Redmond' },
        { 'EmployeeID': 17, 'FirstName': 'Steven', 'City': 'London' },
        { 'EmployeeID': 18, 'FirstName': 'Michael', 'City': 'London' },
        { 'EmployeeID': 19, 'FirstName': 'Robert', 'City': 'London' },
        { 'EmployeeID': 20, 'FirstName': 'Laura', 'City': 'Seattle' },
        { 'EmployeeID': 21, 'FirstName': 'Anne', 'City': 'London' },
        { 'EmployeeID': 22, 'FirstName': 'Margaret', 'City': 'London' },
        { 'EmployeeID': 23, 'FirstName': 'Andrew', 'City': 'Tacoma' },
        { 'EmployeeID': 24, 'FirstName': 'Janet', 'City': 'Kirkland' },
        { 'EmployeeID': 25, 'FirstName': 'Margaret', 'City': 'Redmond' },
        { 'EmployeeID': 26, 'FirstName': 'Steven', 'City': 'London' },
        { 'EmployeeID': 27, 'FirstName': 'Michael', 'City': 'London' },
        { 'EmployeeID': 28, 'FirstName': 'Robert', 'City': 'London' },
        { 'EmployeeID': 29, 'FirstName': 'Laura', 'City': 'Seattle' },
        { 'EmployeeID': 30, 'FirstName': 'Anne', 'City': 'London' },
        { 'EmployeeID': 31, 'FirstName': 'Margaret', 'City': 'Redmond' },
        { 'EmployeeID': 32, 'FirstName': 'Steven', 'City': 'London' }];
        this.multicolumncolset = {
            stringFormat: '{0} ({1})',
            searchColumnIndices:[0,1,2],
            enable: true,
            showHeader: true,
            columns: [
                {
                    field: 'FirstName',
                    headerText: 'FirstName'
                },
                {
                    field: 'EmployeeID',
                    headerText: 'EmployeeID'
                },
                {
                    field: 'City',
                    headerText: 'City'
                }
            ]
        };
        this.multicolumnfields = { key: 'EmployeeID', text: 'FirstName' };

    }
}

Run the above code to render the following output.