##Multi-Selection

The AutoComplete component helps you to select multiple values from the suggestion list using the multiSelectMode property.

There are two types of multi-selection mode.

1. VisualMode – Selection values are displayed in separate box with close like button.

HTML

   <input type="text" id="delimit" ej-autocomplete  width="300" [showPopupButton]="true" multiSelectMode="visualmode" watermarkText="Select a language" [dataSource]="language" />

JS

export class AppComponent {
  language: Array<string>;
    constructor() {
        this.language = ['ActionScript', 'AppleScript', 'ASP', 'BASIC', 'BeanShell',
            'C', 'C++', 'C#', 'Clojure', 'COBOL', 'ColdFusion', 'DataFlex', 'DCL',
            'Erlang', 'E#', 'Fortran', 'F#', 'Flex', 'Google Apps Script', 'Groovy', 'Haskell', 'Hope', 'IBM HAScript',
            'Java', 'JavaScript', 'J#', 'Lisp', 'MATLAB', 'Oak', 'Perl', 'PHP',
            'Python', 'Ruby', 'Scala', 'Scheme', 'T-SQL', 'WebQL', 'ZOPL'];
    }
}

Run the above code to render the following output.

1. Delimiter – Selection values are separated using the delimiter character which can be specified using delimiterChar property.

HTML

    <input type="text" id="delimit" ej-autocomplete  width="300" [showPopupButton]="true" multiSelectMode="delimiter" watermarkText="Select a language" [dataSource]="language" />

Run the above code to render the following output.