syncfusion-vue-dropdowns

# Implementing Syncfusion Vue 3 Dropdowns ## Table of Contents - [AutoComplete Component](#autocomplete-component) - [ComboBox Component](#combobox-component) - [DropdownList Component](#dropdownlist-component) - [ListBox Component](#listbox-component) - [Mention Component](#mention-component) - [MultiColumnComboBox Component](#multicolumncombobox-component) - [MultiSelect Component](#multiselect-component) - [DropdownTree Component](#dropdowntree-component) - [Quick Start Examples](#quick-start-examples) - [Common Patterns](#common-patterns) --- ## AutoComplete Component The AutoComplete component provides a matched suggestion list as the user types into an input field, allowing selection from the filtered results. It supports local and remote data, rich filtering options, templates, grouping, virtualization, and full accessibility. ### Documentation and Navigation Guide #### Getting Started 📄 **Read:** [references/autocomplete-getting-started.md](references/autocomplete-getting-started.md) - Package installation (`@syncfusion/ej2-vue-dropdowns`) - CSS imports and theme configuration - Basic component setup with Vue 3 Composition API - Binding a simple string array - Configuring popup height and width (`:popupHeight`, `:popupWidth`) #### Data Binding 📄 **Read:** [references/autocomplete-data-binding.md](references/autocomplete-data-binding.md) - Array of strings or numbers - Array of objects with `fields` mapping (`:fields="{ value: 'id', text: 'name' }"`) - Array of complex/nested objects (dot-notation field mapping) - Remote data with `DataManager` (ODataV4Adaptor, WebApiAdaptor) - Using `query` property to filter/select remote data - `sortOrder` for alphabetical ordering #### Filtering 📄 **Read:** [references/autocomplete-filtering.md](references/autocomplete-filtering.md) - Filter types: `StartsWith`, `EndsWith`, `Contains` - `:suggestionCount` – limit number of suggestions - `:minLength` – minimum characters before search triggers - `:ignoreCase` – case-sensitive filtering - `:ignoreAccent` – diacritics filtering - `:debounceDelay` – delay filtering to reduce requests - Custom filtering with the `@filtering` event #### Grouping 📄 **Read:** [references/autocomplete-grouping.md](references/autocomplete-grouping.md) - Grouping items using `:fields="{ groupBy: 'category' }"` - Fixed and inline group headers - Custom group header with `#groupTemplate` #### Templates 📄 **Read:** [references/autocomplete-templates.md](references/autocomplete-templates.md) - `#itemTemplate` – customize each list item - `#groupTemplate` – customize group header - `#headerTemplate` – static popup header - `#footerTemplate` – static popup footer - `#noRecordsTemplate` – message when no data found - `#actionFailureTemplate` – message on remote fetch failure #### Value Binding 📄 **Read:** [references/autocomplete-value-binding.md](references/autocomplete-value-binding.md) - Binding primitive values (string, number) - Object binding with `:allowObjectBinding="true"` - Presetting selected values with the `:value` property #### Virtualization 📄 **Read:** [references/autocomplete-virtual-scroll.md](references/autocomplete-virtual-scroll.md) - `:enableVirtualization` for large datasets - Injecting the `VirtualScroll` service - Virtual scrolling with local data, remote data, and grouping - Customizing item count with `query.take()` #### Disabled Items 📄 **Read:** [references/autocomplete-disabled-items.md](references/autocomplete-disabled-items.md) - Disabling items via `:fields="{ disabled: 'isDisabled' }"` - `disableItem()` method for dynamic disabling - Disabling the entire component with `:enabled="false"` #### Accessibility and Localization 📄 **Read:** [references/autocomplete-accessibility-localization.md](references/autocomplete-accessibility-localization.md) - WAI-ARIA roles and attributes - Keyboard navigation shortcuts - RTL support (`:enableRtl="true"`) - Localization with `setLocale()` - WCAG 2.2 compliance overview #### Styling and Customization 📄 **Read:** [references/autocomplete-styling.md](references/autocomplete-styling.md) - CSS class targets for wrapper, icon, focus, placeholder, selection - Float label customization - Popup item appearance - `:cssClass` property for custom class injection - Popup resize (`:allowResize="true"`) - Mandatory asterisk styling #### How-To: Autofill, Highlight, and Icons 📄 **Read:** [references/autocomplete-how-to.md](references/autocomplete-how-to.md) - `:autofill="true"` – suggest first matched item on Arrow Down - `:highlight="true"` – highlight typed characters in suggestion list - Icon support with `:fields="{ iconCss: 'icon' }"` --- ## ComboBox Component ComboBox combines the features of AutoComplete with the ability to select from a dropdown list. It supports data binding, filtering, grouping, templates, cascading operations, and virtual scrolling. ### Documentation and Navigation Guide #### Getting Started 📄 **Read:** [references/combobox-getting-started.md](references/combobox-getting-started.md) - Installation and setup - Basic ComboBox implementation - Binding data arrays - Popup configuration #### Data Binding & Search 📄 **Read:** [references/combobox-data-binding.md](references/combobox-data-binding.md) - Local and remote data sources - Field mapping with `:fields` - Search and filter capabilities #### Filtering & Search 📄 **Read:** [references/combobox-filtering-and-search.md](references/combobox-filtering-and-search.md) - Filter types and matching - Custom filtering with events - Performance optimization #### Grouping & Sorting 📄 **Read:** [references/combobox-grouping-and-sorting.md](references/combobox-grouping-and-sorting.md) - Data grouping with `:fields="{ groupBy: 'category' }"` - Sorting options - Group templates #### Templates & Customization 📄 **Read:** [references/combobox-templates-and-customization.md](references/combobox-templates-and-customization.md) - Item templates with `#itemTemplate` - Group templates - Header and footer templates - Custom styling #### Styling & Theming 📄 **Read:** [references/combobox-styling-and-theming.md](references/combobox-styling-and-theming.md) - Theme configuration - Custom CSS styling - Responsive design #### Popup Resizing 📄 **Read:** [references/combobox-popup-resizing.md](references/combobox-popup-resizing.md) - Enabling popup resize - Size constraints - User resizing #### Advanced Features 📄 **Read:** [references/combobox-advanced-features.md](references/combobox-advanced-features.md) - Cascading ComboBox - Virtual scrolling - Remote data with pagination #### API Reference 📄 **Read:** [references/combobox-api.md](references/combobox-api.md) - Complete props, events, and methods - Usage examples - Common scenarios #### How-To Guides 📄 **Read:** [references/combobox-how-to-guide.md](references/combobox-how-to-guide.md) - Common patterns and solutions - Troubleshooting #### Troubleshooting 📄 **Read:** [references/combobox-troubleshooting.md](references/combobox-troubleshooting.md) - Common issues and solutions --- ## DropdownList Component DropdownList displays a list of options in a dropdown menu, allowing users to select one value. It supports data binding, filtering, grouping, templates, cascading, and accessibility features. ### Documentation and Navigation Guide #### Getting Started 📄 **Read:** [references/dropdownlist-getting-started.md](references/dropdownlist-getting-started.md) - Installation and basic setup - Simple dropdown implementation - Data binding #### Data Binding 📄 **Read:** [references/dropdownlist-data-binding.md](references/dropdownlist-data-binding.md) - Local data arrays - Remote data sources - Field mapping #### Features & Configuration 📄 **Read:** [references/dropdownlist-features-and-configuration.md](references/dropdownlist-features-and-configuration.md) - Disabled items - Read-only mode - Placeholder text - Popup height #### Filtering 📄 **Read:** [references/dropdownlist-filtering.md](references/dropdownlist-filtering.md) - Filter types - Custom filtering - Case-insensitive filtering #### Grouping & Templates 📄 **Read:** [references/dropdownlist-grouping-and-templates.md](references/dropdownlist-grouping-and-templates.md) - Data grouping - Item templates - Group templates #### Accessibility, Styling, Localization 📄 **Read:** [references/dropdownlist-accessibility-styling-localization.md](references/dropdownlist-accessibility-styling-localization.md) - WCAG compliance - Custom styling - RTL support - Localization #### How-To Guides 📄 **Read:** [references/dropdownlist-how-to.md](references/dropdownlist-how-to.md) - Common scenarios - Best practices #### API Reference 📄 **Read:** [references/dropdownlist-api.md](references/dropdownlist-api.md) - Complete API documentation --- ## ListBox Component ListBox displays a list of items and allows selection of one or multiple items. It supports data binding, dual-list operations, icons, templates, keyboard navigation, and accessibility. ### Documentation and Navigation Guide #### Getting Started 📄 **Read:** [references/listbox-getting-started.md](references/listbox-getting-started.md) - Installation and setup - Basic ListBox implementation #### Data Binding 📄 **Read:** [references/listbox-data-binding.md](references/listbox-data-binding.md) - Local and remote data - Field mapping - Selection modes #### Selection 📄 **Read:** [references/listbox-selection.md](references/listbox-selection.md) - Single selection - Multiple selection - Programmatic selection #### Features 📄 **Read:** [references/listbox-features.md](references/listbox-features.md) - Disabled items - Drag and drop - Tooltips #### Dual ListBox 📄 **Read:** [references/listbox-dual-list-box.md](references/listbox-dual-list-box.md) - Dual list implementation - Move items between lists - Toolbar operations #### Icons & Templates 📄 **Read:** [references/listbox-icons-and-templates.md](references/listbox-icons-and-templates.md) - Icons in list items - Custom item templates - Group templates #### Style & Appearance 📄 **Read:** [references/listbox-style-and-appearance.md](references/listbox-style-and-appearance.md) - Custom styling - Theme configuration - Responsive design #### Accessibility 📄 **Read:** [references/listbox-accessibility.md](references/listbox-accessibility.md) - WCAG compliance - Keyboard navigation - Screen reader support #### How-To Guides 📄 **Read:** [references/listbox-how-to-guides.md](references/listbox-how-to-guides.md) - Common patterns - Best practices #### API Reference 📄 **Read:** [references/listbox-api.md](references/listbox-api.md) - Complete API documentation --- ## Mention Component Mention provides @mention functionality for text inputs, allowing users to mention items (people, teams, etc.) in content. ### Documentation and Navigation Guide #### Getting Started 📄 **Read:** [references/mention-getting-started.md](references/mention-getting-started.md) - Installation and setup - Basic Mention implementation #### Working with Data 📄 **Read:** [references/mention-working-with-data.md](references/mention-working-with-data.md) - Data binding - Field mapping - Remote data #### Filtering Data 📄 **Read:** [references/mention-filtering-data.md](references/mention-filtering-data.md) - Filter options - Custom filtering - Performance optimization #### Templates 📄 **Read:** [references/mention-template.md](references/mention-template.md) - Item templates - Custom mention display - Avatar support #### Sorting 📄 **Read:** [references/mention-sorting.md](references/mention-sorting.md) - Sort configurations - Alphabetical sorting #### Disabled Items 📄 **Read:** [references/mention-disabled-items.md](references/mention-disabled-items.md) - Disabling items - Conditional disabling #### Customization 📄 **Read:** [references/mention-customization.md](references/mention-customization.md) - Custom styling - Popup customization - Trigger character customization #### Accessibility 📄 **Read:** [references/mention-accessibility.md](references/mention-accessibility.md) - WCAG compliance - Keyboard support - Screen reader integration #### Localization 📄 **Read:** [references/mention-localization.md](references/mention-localization.md) - Language support - Text localization #### API Reference 📄 **Read:** [references/mention-api.md](references/mention-api.md) - Complete API documentation --- ## MultiColumnComboBox Component MultiColumnComboBox extends ComboBox to display multiple columns of data, useful for complex selections with additional context. ### Documentation and Navigation Guide #### Getting Started 📄 **Read:** [references/multicolumn-combobox-getting-started.md](references/multicolumn-combobox-getting-started.md)