Add A Multiselect Dropdown into Your JavaScript Application
Tags: javascript, webdev, tutorial, productivity
Published: 2019-07-10 12:20:24

---
title: Add A Multiselect Dropdown into Your JavaScript Application
published: true
description: This blog explains in details about adding a multiselect dropdown in a Javascript application and its various customization factors. 
tags: javascript, webdev, tutorial, productivity
canonical_url: https://blog.syncfusion.com/post/add-multiselect-dropdown-into-your-javascript-application.aspx
---

Syncfusion Essential JS 2 provides a multiselect component that supports all functionality out of the box to create a Facebook-like multiselect component. This UI enhances the user experience of finding, selecting, and removing items in an interactive way, a way that is preferred in almost all apps nowadays. The Essential JS 2 multiselect component is an extended version of HTML select with selection mode, checkboxes, sorting, grouping, templates, custom values, etc.

In this blog, you are going to learn how to get started with multiselect component and explore its most important features.

##Get started with multiselect component
The multiselect component can be configured by following these steps in TypeScript:

1.Clone the Essential JS 2 [quickstart](https://github.com/syncfusion/ej2-quickstart) seed repository and configure the drop-down package in the system.config.js file. 
```js
"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js"
```
2.Install the NPM packages using the following command. 
```
$ npm install
```
3.Add the HTML input element that needs to be initialized as a component in index.html file.
```html
<body>
   <div id='container' style="margin:0 auto; width:250px;">
      <input type="text" id='multi-select' />
   </div>
</body>

```
4.Initialize the component in the app.ts file as shown in the following. 
```js
import { MultiSelect } from '@syncfusion/ej2-dropdowns';
 
// initialize MultiSelect component
let msObject: MultiSelect = new MultiSelect();
 
// render initialized MultiSelect
msObject.appendTo('#multi-select');
```
##Populate data
Multiselect is a data-bound component and can be bound to data from arrays of primitive data, JSON data collections, or remote data sources such as OData, OData V4, URL, and Web API to display data. You can map the data source in the form of DataManager or collection type directly.

To bind remote services, create the DataManager with a service URL and bind it to the component as shown in the following.
```js
import { MultiSelect } from '@syncfusion/ej2-dropdowns';
import { Query, DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
 
let listObj: MultiSelect = new MultiSelect({
    dataSource: new DataManager({
        url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Customers',
        adaptor: new ODataAdaptor,
        crossDomain: true
    }),
    query: new Query().select(['ContactName', 'CustomerID']).take(25),
    fields: { text: 'ContactName', value: 'CustomerID' }
});
listObj.appendTo('#multi-select');
```
<figure>
  <img src="https://blog.syncfusion.com/wp-content/uploads/2018/08/image-310.png" alt="Multiselect with Data" style="width:100%">
  <figcaption>Multiselect with Data</figcaption>
</figure>
##Configuring selection mode
The selected items can be visualized in a text box with different modes:

* Default
* Box (chip)
* Delimiter
* Checkbox

###Box (chip)
The selected items are displayed with box (chip) and associated with a close icon. Users can remove each box (chip) with the close button, and can navigate through boxes (chips) using arrow keys. To enable this multiselection [mode](https://ej2.syncfusion.com/documentation/api/multi-select/#mode), set the mode property to Box. How to customize the appearance of a box is described in this [documentation](https://ej2.syncfusion.com/documentation/multi-select/chip-customization/) section.
```js
let msObj: MultiSelect = new MultiSelect({
 
    // --- Initialize component with data source, query, and fields
 
    mode:"Box"
});
```
<figure>
  <img src="https://blog.syncfusion.com/wp-content/uploads/2018/08/image-311.png" alt="Multiselect in Box Mode" style="width:100%">
  <figcaption>Multiselect in Box Mode</figcaption>
</figure>
###Delimiter
When selecting multiple items, the selected items can be divided with the desired character as a delimiter. By default, the delimiter character is set to comma. The delimiter character is customizable using the [delimiterChar](https://ej2.syncfusion.com/documentation/api/multi-select/#delimiterchar) property. To enable this multiselection [mode](https://ej2.syncfusion.com/documentation/api/multi-select/#mode), set the mode property to Delimiter.
```js
let msObj: MultiSelect = new MultiSelect({
 
    // --- Initialize component with data source, query, and fields
 
    mode:" Delimiter"
});
```
<figure>
  <img src="https://blog.syncfusion.com/wp-content/uploads/2018/08/image-312.png" alt="Multiselect in Delimiter Mode" style="width:100%">
  <figcaption>Multiselect in Delimiter Mode</figcaption>
</figure>
###Default
When the component gets focus, the selected items are displayed with Box (chip) mode. Once the component gets focus-out, the selected items are changed with the delimiter.

Component gets focus:
<figure>
  <img src="https://blog.syncfusion.com/wp-content/uploads/2018/08/image-313.png" alt="Component gets focus-in" style="width:100%">
  <figcaption>Component gets focus-in</figcaption>
</figure>
Component gets focus-out:
<figure>
  <img src="https://blog.syncfusion.com/wp-content/uploads/2018/08/image-314.png" alt="Component gets focus-out" style="width:100%">
  <figcaption>Component gets focus-out</figcaption>
</figure>
###Check box
The multiselect component allows you to select multiple items using checkboxes. The list of items populates with checkboxes when this mode is enabled. To enable this multiselection mode, set the [mode](https://ej2.syncfusion.com/documentation/api/multi-select/#mode) property to CheckBox.

Note: Import the CheckBox module from the ej2-buttons package and CheckBoxSelection from the ej2-dropdowns package to enable this option in multiselect component.
```js
import { MultiSelect,CheckBoxSelection } from '@syncfusion/ej2-dropdowns';
import { CheckBox, ChangeEventArgs } from '@syncfusion/ej2-buttons';
import { Query, DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
 
MultiSelect.Inject(CheckBoxSelection);
 
let listObj: MultiSelect = new MultiSelect({
    dataSource: new DataManager({
        url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Customers',
        adaptor: new ODataAdaptor,
        crossDomain: true
    }),
    query: new Query().select(['ContactName', 'CustomerID']).take(25),
    fields: { text: 'ContactName', value: 'CustomerID' },
    mode:"CheckBox"
});
listObj.appendTo('#multi-select');
```
<figure>
  <img src="https://blog.syncfusion.com/wp-content/uploads/2018/08/image-315.png" alt="Multiselect with Check Box Mode" style="width:100%">
  <figcaption>Multiselect with Check Box Mode</figcaption>
</figure>
##Adding a custom value (tagging)
The user can dynamically add new items with an existing data source. The items don’t have to match exactly with existing pop-up list items. The added new items append at the end of the list. To add a custom value to the existing collection of data, enter the custom value and press the Enter key.
```js
let msObj: MultiSelect = new MultiSelect({
 
    // --- Initialize component with data source, query, and fields
 
    allowCustomValue: true
});
```
<figure>
  <img src="https://blog.syncfusion.com/wp-content/uploads/2018/08/image-316.png" alt="Multiselect with Custom Value" style="width:100%">
  <figcaption>Multiselect with Custom Value</figcaption>
</figure>
##Grouping the collection
We can arrange logically related items as groups in a pop-up list. The group’s header is displayed both inline and statically above groups of items. To enable the grouping feature, map the [groupBy](https://ej2.syncfusion.com/documentation/api/multi-select/fieldSettingsModel/#groupby) field on data binding.
```js
import { MultiSelect } from '@syncfusion/ej2-dropdowns';
import { Query, DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
 
let listObj: MultiSelect = new MultiSelect({
    dataSource: new DataManager({
        url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Customers',
        adaptor: new ODataAdaptor,
        crossDomain: true
    }),
    query: new Query().select(['ContactName', 'CustomerID', 'Coun-try']).take(50),
    fields: { text: 'ContactName', value: 'CustomerID', groupBy: 'Country' },
    mode:"Box"
});
listObj.appendTo('#multi-select');
```
<figure>
  <img src="https://blog.syncfusion.com/wp-content/uploads/2018/08/image-317.png" alt="Multiselect with Grouping" style="width:100%">
  <figcaption>Multiselect with Grouping</figcaption>
</figure>
##Filter configuration
Data items can be filtered and rebound to the multiselect component. The component provides a way to achieve this:

1. The filtering is not enabled by default, so enable it by setting [allowFiltering](https://ej2.syncfusion.com/documentation/api/multi-select/#allowfiltering) to true.
2. Define the [filtering](https://ej2.syncfusion.com/documentation/api/multi-select/#filtering) event to filter the data based on parameters.
```js
import { MultiSelect, FilteringEventArgs  } from '@syncfusion/ej2-dropdowns';
import { Query, DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
 
let listObj: MultiSelect = new MultiSelect({
    dataSource: new DataManager({
        url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Customers',
        adaptor: new ODataAdaptor,
        crossDomain: true
    }),
    query: new Query().select(['ContactName', 'CustomerID', 'Coun-try']).take(50),
    fields: { text: 'ContactName', value: 'CustomerID', groupBy: 'Country' },
    mode:"Box",
    allowFiltering: true,
    filtering: function (e: FilteringEventArgs) {
  
    }
 
});
listObj.appendTo('#multi-select');
```
<figure>
  <img src="https://blog.syncfusion.com/wp-content/uploads/2018/08/image-318.png" alt="Multiselect with Filtered Data" style="width:100%">
  <figcaption>Multiselect with Filtered Data</figcaption>
</figure>
##Customization using template
This section explains customizing the default appearance of data items, selected values, group headers, headers, and footers.

###Value template
The multiselect component provides the flexibility to customize the visualization of each selected item using a value template. The value template is applicable to customize box appearance.
```js
let msObj: MultiSelect = new MultiSelect({
 
    // --- Initialize component with data source, query, and fields
 
    valueTemplate:"${ ContactName} - ${ Country}"
});
```
<figure>
  <img src="https://blog.syncfusion.com/wp-content/uploads/2018/08/image-319.png" alt="Selected Item with Template" style="width:100%">
  <figcaption>Selected Item with Template</figcaption>
</figure>
###Item template
You can specify how every individual item is displayed in a pop-up.
```js
let msObj: MultiSelect = new MultiSelect({
 
    // --- Initialize component with data source, query, and fields
 
itemTemplate: "${ ContactName} — ${ Country}", });
```
<figure>
  <img src="https://blog.syncfusion.com/wp-content/uploads/2018/08/image-320.png" alt="List with Item Template" style="width:100%">
  <figcaption>List with Item Template</figcaption>
</figure>
###Header template
You can enable a header section for multiselect’s pop-up, which displays at the top of a pop-up. The [headerTemplate](https://ej2.syncfusion.com/documentation/api/multi-select/#headertemplate) property is used to provide header content that accepts both string and HTML content.
```js
let msObj: MultiSelect = new MultiSelect({
 
    // --- Initialize component with data source, query, and fields
 
    headerTemplate:"<span class="head"><span class="name">Name</span><span class="city">City</span></span>"
 
});
```
<figure>
  <img src="https://blog.syncfusion.com/wp-content/uploads/2018/08/image-321.png" alt="List with Header" style="width:100%">
  <figcaption>List with Header</figcaption>
</figure>
###Footer template
You can include a footer section, which displays at the bottom of multiselect’s pop-up. The [footerTemplate](https://ej2.syncfusion.com/documentation/api/multi-select/#footertemplate) property is used to provide footer content that accepts both string and HTML content.
```js
let msObj: MultiSelect = new MultiSelect({
 
    // --- Initialize component with data source, query, and fields
 
    footerTemplate:"<span class="foot"> Total list items: 50 </span>"
 
});
```
<figure>
  <img src="https://blog.syncfusion.com/wp-content/uploads/2018/08/image-322.png" alt="List with Footer" style="width:100%">
  <figcaption>List with Footer</figcaption>
</figure>
###No records template
When the data source that binds to multiselect component has empty records or no matches found on filtering results, the no records template is displayed in multiselect component. Use the [noRecordsTemplate](https://ej2.syncfusion.com/documentation/api/multi-select/#norecordstemplate) property to define a custom appearance for the no records pop-up.
```js
let msObj: MultiSelect = new MultiSelect({
 
    // --- Initialize component with data source, query, and fields
 
    noRecordsTemplate: "<span class="norecord"> NO DATA AVAILABLE </span>"
 
});
```
<figure>
  <img src="https://blog.syncfusion.com/wp-content/uploads/2018/08/image-323.png" alt="Pop-up with No Records Template" style="width:100%">
  <figcaption>Pop-up with No Records Template</figcaption>
</figure>
###Action failure template
When you bind multiselect component with remote data and the data fetch actions fail, the action failure template is displayed in a pop-up.
```js
let msObj: MultiSelect = new MultiSelect({
 
    // --- Initialize component with data source, query, and fields
 
    actionFailureTemplate:" <span class="action-failure">Data fetch get fails </span>"
 
});
```
<figure>
  <img src="https://blog.syncfusion.com/wp-content/uploads/2018/08/image-324.png" alt="Data Fetch Request Fails" style="width:100%">
  <figcaption>Data Fetch Request Fails</figcaption>
</figure>
###Group template
When the list items are grouped with logical order, a group header is displayed above each group. A group’s header content can be customized using the [groupTemplate](https://ej2.syncfusion.com/documentation/api/multi-select/#grouptemplate) property.
```js
let msObj: MultiSelect = new MultiSelect({
 
    // --- Initialize component with data source, query, and fields
 
    groupTemplate:"${City}"
 
});
```
<figure>
  <img src="https://blog.syncfusion.com/wp-content/uploads/2018/08/image-325.png" alt="List with Customized Group Header" style="width:100%">
  <figcaption>List with Customized Group Header</figcaption>
</figure>
##Customize box (chip) appearance
By default, the chips have styles based on the current applied theme. But you can customize the chip appearance by adding your own CSS classes using the tagging events of multiselect component. Import [TaggingEventArgs](https://ej2.syncfusion.com/documentation/api/multi-select/taggingEventArgs/) from the ej2-dropdowns package to configure the [tagging](https://ej2.syncfusion.com/documentation/api/multi-select/#tagging) event.
```js
let msObj: MultiSelect = new MultiSelect({
 
    // --- Initialize component with data source, query, and fields
 
    tagging: (e: TaggingEventArgs) => {
 
        // Customize code here
 
    }
 
});
```
Conclusion
You have learned how to get started with multiselect component and other important features in this blog. You can learn about this control further in the following resources. Please [try multiselect](https://www.syncfusion.com/downloads/essential-js2/verify) yourself and if you have any questions on using the component, or if you would like to provide feedback, please do so in the comments section.

GitHub source: [https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/dropdowns](https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/dropdowns)

Demos: [https://ej2.syncfusion.com/demos/#/material/multiselect/default.html](https://ej2.syncfusion.com/demos/?_ga=2.161859708.1708073739.1562561788-1065100418.1555049162#/material/grid/grid-overview.html)

User guide documentation: [https://ej2.syncfusion.com/documentation/multi-select/?lang=typescript](https://ej2.syncfusion.com/documentation/multi-select/?lang=typescript&_ga=2.161859708.1708073739.1562561788-1065100418.1555049162)

The post [Add A Multiselect Dropdown into Your JavaScript Application](https://blog.syncfusion.com/post/add-multiselect-dropdown-into-your-javascript-application.aspx) appeared first on [Syncfusion Blogs](https://blog.syncfusion.com).