##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]="truemultiSelectMode="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]="truemultiSelectMode="delimiter" watermarkText="Select a language" [dataSource]="language/>

    Run the above code to render the following output.