ComboBox component allows the user to type a value or choose an option from the list of predefined options available
<ejs-combobox :dataSource='data'></ejs-combobox>
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.
Defaults to ‘Request failed’
boolean
Specifies whether the component allows user defined value which does not exist in data source.
Defaults to true
boolean
When allowFiltering is set to true, show the filter bar (search box) of the component.
The filter action retrieves matched items through the filtering
event based on
the characters typed in the search TextBox.
If no match is found, the value of the noRecordsTemplate
property will be displayed.
Defaults to false
boolean
Defines whether the object binding is allowed or not in the component.
Defaults to false
boolean
Specifies whether suggest a first matched item in input when searching. No action happens when no matches found.
Defaults to false
string
Sets CSS classes to the root element of the component that allows customization of appearance.
Defaults to null
{ : }
[]
| 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
.
Defaults to []
boolean
Enable or disable persisting component’s state between page reloads. If enabled, following list of states will be persisted.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
boolean
Defines whether to enable virtual scrolling in the component.
Defaults to false
boolean
Specifies a value that indicates whether the component is enabled or not.
Defaults to true
The fields
property maps the columns of the data table and binds the data to the component.
groupBy - Group the list items with it’s related items by mapping groupBy field.
<input type="text" tabindex="1" id="list"> </input>
let customers: DropDownList = new DropDownList({
dataSource:new DataManager({ url:'http://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/' }),
query: new Query().from('Customers').select(['ContactName', 'CustomerID']).take(5),
fields: { text: 'ContactName', value: 'CustomerID' },
placeholder: 'Select a customer'
});
customers.appendTo("#list");
Defaults to {text: null, value: null, iconCss: null, groupBy: null, disabled: null}
Determines on which filter type, the component needs to be considered on search action.
The 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 StartsWith
, all the suggestion items which contain typed characters to listed in the suggestion popup.
Defaults to ‘StartsWith’
FloatLabelType
Specifies whether to display the floating label above the input element. Possible values are:
Defaults to Syncfusion.EJ2.Inputs.FloatLabelType.Never
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.
Defaults to null
string
| Function
Accepts the template design and assigns it to the group headers present in the popup list.
Defaults to null
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.
Defaults to null
{ : }
Allows additional HTML attributes such as title, name, etc., and accepts n number of attributes in a key-value pair format.
<template>
<ejs-combobox :htmlAttributes="htmlAttributes" :value="value" :dataSource="dataSource" :fields="fields" :placeholder="placeholder"></ejs-combobox>
</template>
<script>
import Vue from "vue";
import { AutoCompletePlugin } from "@syncfusion/ej2-vue-dropdowns";
Vue.use(AutoCompletePlugin);
var games = [
{ Id: "Game1", Game: "American Football" },
{ Id: "Game2", Game: "Badminton" },
{ Id: "Game3", Game: "Basketball" },
{ Id: "Game4", Game: "Cricket" },
{ Id: "Game5", Game: "Football" }];
];
export default {
data() {
return {
htmlAttributes: { name: "games", readonly: "readonly", title: "ComboBox" },
fields: { text: 'Game', value: 'Id' },
placeholder: 'Select a game',
dataSource: games,
value: "Basketball"
};
}
};
</script>
Defaults to {}
boolean
ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.
boolean
When set to ‘false’, consider the case-sensitive
on performing the search to find suggestions.
By default consider the casing.
Defaults to true
number
| null
Gets or sets the index of the selected item in the component.
Defaults to null
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.
Defaults to true
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.
Defaults to null
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ‘en-US’
string
| Function
Accepts the template design and assigns it to popup list of component when no data is available on the component.
Defaults to ‘No records found’
string
Specifies a short hint that describes the expected value of the DropDownList component.
Defaults to null
string
| number
Specifies the height of the popup list.
For more details about the popup configuration refer to
Popup Configuration
documentation.
Defaults to ‘300px’
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.
Defaults to ‘100%’
Query
Accepts the external Query
that execute along with data processing
.
<template>
<ejs-combobox :query="query" :dataSource="dataSource" :fields="fields" :placeholder="placeholder"></ejs-combobox>
</template>
<script>
import Vue from "vue";
import { ComboBoxPlugin } from "@syncfusion/ej2-vue-dropdowns";
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
Vue.use(ComboBoxPlugin);
var remoteData = new DataManager({
url: 'https://ej2services.syncfusion.com/production/web-services/api/Employees',
adaptor: new WebApiAdaptor,
crossDomain: true
});
export default {
data() {
return {
query: new Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount(),
fields: { text: 'FirstName', value: 'EmployeeID' },
placeholder: 'Select a name',
dataSource: remoteData,
};
}
};
</script>
Defaults to null
boolean
When set to true, the user interactions on the component are disabled.
Defaults to false
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.
Defaults to true
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.Defaults to null
string
| null
Gets or sets the display text of the selected item in the component.
Defaults to null
number
| string
| boolean
| object
| null
Gets or sets the value of the selected item in the component.
Defaults to null
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.
Defaults to ‘100%’
number
specifies the z-index value of the component popup element.
Defaults to 1000
Adds a new item to the combobox popup list. By default, new item appends to the list as the last item, but you can insert based on the index parameter.
Parameter | Type | Description |
---|---|---|
items | { : }[] | { : } | string | boolean | number | string[] | boolean[] | number[] | Specifies an array of JSON data or a JSON data. |
|
itemIndex (optional) | number |
Specifies the index to place the newly added item in the popup list. |
Returns void
Allows you to clear the selected values from the component.
Returns void
Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
Returns void
Method to disable specific item in the popup.
Parameter | Type | Description |
---|---|---|
item | string | number | object | HTMLLIElement |
Specifies the item to be disabled. |
Returns void
To filter the data from given data source by using query
Parameter | Type | Description |
---|---|---|
dataSource | { : }[] | DataManager | string[] | number[] | boolean[] |
Set the data source to filter. |
query (optional) | Query |
Specify the query to filter the data. |
fields (optional) | FieldSettingsModel |
Specify the fields to map the column in the data table. |
Returns void
Sets the focus to the component for interaction.
Returns void
Moves the focus from the component if the component is already focused.
Returns void
Gets the data Object that matches the given value.
Parameter | Type | Description |
---|---|---|
value | string | number | boolean |
Specifies the value of the list item. |
Returns * { : }** | *string | number | boolean
Gets all the list items bound on this component.
Returns Element[]
Hides the popup if it is in open state.
Returns void
Hides the spinner loader.
Returns void
Opens the popup that displays the list of items.
Returns void
Shows the spinner loader.
Returns void
EmitType<Object>
Triggers before fetching data from the remote server.
EmitType<Object>
Triggers after data is fetched successfully from the remote server.
EmitType<Object>
Triggers when the data fetch request from the remote server fails.
EmitType<Object>
Triggers when the popup before opens.
EmitType<Object>
Triggers when focus moves out from the component.
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
Triggers when the popup is closed.
EmitType<Object>
Triggers when the component is created.
EmitType<CustomValueSpecifierEventArgs>
Triggers on set a
custom value
to this component.
EmitType<Object>
Triggers when data source is populated in the popup list..
EmitType<Object>
Triggers when the component is destroyed.
Triggers on typing a character in the component.
For more details about the filtering refer to
Filtering
documentation.
EmitType<Object>
Triggers when the component is focused.
Triggers when the popup opens.
Triggers when an item in the popup is selected by the user either with mouse/tap or with keyboard navigation.