2022-09-09 20:41:18 +00:00
< template >
2022-12-08 12:26:57 +00:00
< AppDoc name = "MultiSelectDemo" :sources ="sources" github = "multiselect/MultiSelectDemo.vue" >
< h5 > Import via Module < / h5 >
< pre v -code .script > < code >
2022-09-09 20:41:18 +00:00
import MultiSelect from 'primevue/multiselect' ;
< / code > < / pre >
2022-12-08 12:26:57 +00:00
< h5 > Import via CDN < / h5 >
< pre v-code > < code >
2022-09-09 20:41:18 +00:00
& lt ; script src = "https://unpkg.com/primevue@^3/core/core.min.js" & gt ; & lt ; / s c r i p t & g t ;
& lt ; script src = "https://unpkg.com/primevue@^3/multiselect/multiselect.min.js" & gt ; & lt ; / s c r i p t & g t ;
< / code > < / pre >
2022-12-08 12:26:57 +00:00
< h5 > Getting Started < / h5 >
< p > MultiSelect requires a value to bind and a collection of arbitrary objects along with the < i > optionLabel < / i > property to specify the label property of the option . < / p >
< pre v-code > < code >
2022-09-09 20:41:18 +00:00
& lt ; MultiSelect v - model = "selectedCars" : options = "cars" optionLabel = "brand" placeholder = "Select Brands" / & gt ;
< / code > < / pre >
2022-12-08 12:26:57 +00:00
< pre v -code .script > < code >
2022-09-09 20:41:18 +00:00
data ( ) {
return {
selectedCars : null ,
cars : [
{ brand : 'Audi' , value : 'Audi' } ,
{ brand : 'BMW' , value : 'BMW' } ,
{ brand : 'Fiat' , value : 'Fiat' } ,
{ brand : 'Honda' , value : 'Honda' } ,
{ brand : 'Jaguar' , value : 'Jaguar' } ,
{ brand : 'Mercedes' , value : 'Mercedes' } ,
{ brand : 'Renault' , value : 'Renault' } ,
{ brand : 'Volkswagen' , value : 'Volkswagen' } ,
{ brand : 'Volvo' , value : 'Volvo' }
]
}
}
< / code > < / pre >
2022-12-08 12:26:57 +00:00
< h5 > Chips Display < / h5 >
< p > A comma separated list is used by default to display selected items whereas alternative chip mode is provided using the < i > display < / i > property to visualize the items as tokens . < / p >
< pre v-code > < code >
2022-09-09 20:41:18 +00:00
& lt ; MultiSelect v - model = "selectedCars" : options = "cars" optionLabel = "brand" placeholder = "Select Brands" display = "chip" / & gt ;
< / code > < / pre >
2022-12-08 12:26:57 +00:00
< h5 > Grouping < / h5 >
< p > Options groups are specified with the < i > optionGroupLabel < / i > and < i > optionGroupChildren < / i > properties . < / p >
< pre v -code .script > < code >
2022-09-09 20:41:18 +00:00
export default {
data ( ) {
return {
selectedGroupedCities : null ,
groupedCities : [ {
label : 'Germany' , code : 'DE' ,
items : [
{ label : 'Berlin' , value : 'Berlin' } ,
{ label : 'Frankfurt' , value : 'Frankfurt' } ,
{ label : 'Hamburg' , value : 'Hamburg' } ,
{ label : 'Munich' , value : 'Munich' }
]
} ,
{
label : 'USA' , code : 'US' ,
items : [
{ label : 'Chicago' , value : 'Chicago' } ,
{ label : 'Los Angeles' , value : 'Los Angeles' } ,
{ label : 'New York' , value : 'New York' } ,
{ label : 'San Francisco' , value : 'San Francisco' }
]
} ,
{
label : 'Japan' , code : 'JP' ,
items : [
{ label : 'Kyoto' , value : 'Kyoto' } ,
{ label : 'Osaka' , value : 'Osaka' } ,
{ label : 'Tokyo' , value : 'Tokyo' } ,
{ label : 'Yokohama' , value : 'Yokohama' }
]
} ]
}
}
}
< / code > < / pre >
2022-12-08 12:26:57 +00:00
< pre v-code > < code > < template v-pre >
2022-09-09 20:41:18 +00:00
& lt ; MultiSelect v - model = "selectedGroupedCities" : options = "groupedCities"
optionLabel = "label" optionGroupLabel = "label" optionGroupChildren = "items" & gt ;
& lt ; / M u l t i S e l e c t & g t ;
< / template >
< / code > < / pre >
2022-12-08 12:26:57 +00:00
< h5 > Filtering < / h5 >
< p >
Filtering allows searching items in the list using an input field at the header . In order to use filtering , enable < i > filter < / i > property . By default , optionLabel is used when searching and < i > filterFields < / i > can be used to customize the
fields being utilized . Furthermore , < i > filterMatchMode < / i > is available to define the search algorithm . Valid values are "contains" ( default ) , "startsWith" and "endsWith" .
< / p >
2022-09-09 20:41:18 +00:00
2022-12-08 12:26:57 +00:00
< pre v-code > < code >
2022-09-09 20:41:18 +00:00
& lt ; MultiSelect v - model = "selectedCars" : options = "cars" : filter = "true" optionLabel = "brand" placeholder = "Select Brands" / & gt ;
< / code > < / pre >
2022-12-08 12:26:57 +00:00
< h5 > Templating < / h5 >
< p >
Label of an option is used as the display text of an item by default , for custom content support define an < i > option < / i > template that gets the option instance as a parameter . In addition < i > value < / i > , < i > optiongroup < / i > , < i > chip < / i > ,
< i > header < / i > , < i > footer < / i > , < i > emptyfilter < / i > and < i > empty < / i > slots are provided for further customization .
< / p >
< pre v-code > < code > < template v-pre >
2022-09-09 20:41:18 +00:00
& lt ; MultiSelect v - model = "selectedCars2" : options = "cars" optionLabel = "brand" placeholder = "Select a Car" & gt ;
& lt ; template # value = "slotProps" & gt ;
& lt ; div class = "p-multiselect-car-token" v - for = "option of slotProps.value" : key = "option.brand" & gt ;
2022-12-08 12:26:57 +00:00
& lt ; img : alt = "option.brand" : src = "'demo/images/car/' + option.brand + '.png'" / & gt ;
2022-09-09 20:41:18 +00:00
& lt ; span & gt ; { { option . brand } } & lt ; / s p a n & g t ;
& lt ; / d i v & g t ;
& lt ; template v - if = "!slotProps.value || slotProps.value.length === 0" & gt ;
Select Brands
& lt ; / t e m p l a t e & g t ;
& lt ; / t e m p l a t e & g t ;
& lt ; template # option = "slotProps" & gt ;
& lt ; div class = "p-multiselect-car-option" & gt ;
2022-12-08 12:26:57 +00:00
& lt ; img : alt = "slotProps.option.brand" : src = "'demo/images/car/' + slotProps.option.brand + '.png'" / & gt ;
2022-09-09 20:41:18 +00:00
& lt ; span & gt ; { { slotProps . option . brand } } & lt ; / s p a n & g t ;
& lt ; / d i v & g t ;
& lt ; / t e m p l a t e & g t ;
& lt ; / M u l t i S e l e c t & g t ;
< / template >
< / code > < / pre >
2022-12-08 12:26:57 +00:00
< h5 > Properties < / h5 >
< p > Any property of HTMLDivElement are passed to the main container element . Following are the additional properties to configure the component . < / p >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Name < / th >
< th > Type < / th >
< th > Default < / th >
< th > Description < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > modelValue < / td >
< td > any < / td >
< td > null < / td >
< td > Value of the component . < / td >
< / tr >
< tr >
< td > options < / td >
< td > array < / td >
< td > null < / td >
< td > An array of selectitems to display as the available options . < / td >
< / tr >
< tr >
< td > optionLabel < / td >
< td > string | function < / td >
< td > null < / td >
< td > Property name or getter function to use as the label of an option . < / td >
< / tr >
< tr >
< td > optionValue < / td >
< td > string | function < / td >
< td > null < / td >
< td > Property name or getter function to use as the value of an option , defaults to the option itself when not defined . < / td >
< / tr >
< tr >
< td > optionDisabled < / td >
< td > string | function < / td >
< td > null < / td >
< td > Property name or getter function to use as the disabled flag of an option , defaults to false when not defined . < / td >
< / tr >
< tr >
< td > optionGroupLabel < / td >
< td > string | function < / td >
< td > null < / td >
< td > Property name or getter function to use as the label of an option group . < / td >
< / tr >
< tr >
< td > optionGroupChildren < / td >
< td > string | function < / td >
< td > null < / td >
< td > Property name or getter function that refers to the children options of option group . < / td >
< / tr >
< tr >
< td > scrollHeight < / td >
< td > string < / td >
< td > 200 px < / td >
< td > Height of the viewport , a scrollbar is defined if height of list exceeds this value . < / td >
< / tr >
< tr >
< td > placeholder < / td >
< td > string < / td >
< td > null < / td >
< td > Label to display when there are no selections . < / td >
< / tr >
< tr >
< td > disabled < / td >
< td > boolean < / td >
< td > false < / td >
< td > When present , it specifies that the component should be disabled . < / td >
< / tr >
< tr >
< td > inputId < / td >
< td > string < / td >
< td > null < / td >
< td > Identifier of the underlying input element . < / td >
< / tr >
< tr >
< td > inputProps < / td >
< td > object < / td >
< td > null < / td >
< td > Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component . < / td >
< / tr >
< tr >
< td > panelStyle < / td >
< td > any < / td >
< td > null < / td >
< td > Inline style of the overlay panel . < / td >
< / tr >
< tr >
< td > panelClass < / td >
< td > string < / td >
< td > null < / td >
< td > Style class of the overlay panel . < / td >
< / tr >
< tr >
< td > panelProps < / td >
< td > object < / td >
< td > null < / td >
< td > Uses to pass all properties of the HTMLDivElement to the overlay panel . < / td >
< / tr >
< tr >
< td > filterInputProps < / td >
< td > object < / td >
< td > null < / td >
< td > Uses to pass all properties of the HTMLInputElement to the filter input inside the overlay panel . < / td >
< / tr >
< tr >
< td > closeButtonProps < / td >
< td > object < / td >
< td > null < / td >
< td > Uses to pass all properties of the HTMLButtonElement to the close button inside the overlay panel . < / td >
< / tr >
< tr >
< td > dataKey < / td >
< td > string < / td >
< td > null < / td >
< td > A property to uniquely identify an option . < / td >
< / tr >
< tr >
< td > filter < / td >
< td > boolean < / td >
< td > false < / td >
< td > When specified , displays a filter input at header . < / td >
< / tr >
< tr >
< td > filterPlaceholder < / td >
< td > string < / td >
< td > null < / td >
< td > Placeholder text to show when filter input is empty . < / td >
< / tr >
< tr >
< td > filterLocale < / td >
< td > string < / td >
< td > undefined < / td >
< td > Locale to use in filtering . The default locale is the host environment ' s current locale . < / td >
< / tr >
< tr >
< td > filterMatchMode < / td >
< td > string < / td >
< td > contains < / td >
< td > Defines the filtering algorithm to use when searching the options . Valid values are "contains" ( default ) , "startsWith" and "endsWith" < / td >
< / tr >
< tr >
< td > filterFields < / td >
< td > array < / td >
< td > null < / td >
< td > Fields used when filtering the options , defaults to optionLabel . < / td >
< / tr >
< tr >
< td > appendTo < / td >
< td > string < / td >
< td > body < / td >
< td > A valid query selector or an HTMLElement to specify where the overlay gets attached . Special keywords are "body" for document body and "self" for the element itself . < / td >
< / tr >
< tr >
< td > display < / td >
< td > string < / td >
< td > comma < / td >
< td > Defines how the selected items are displayed , valid values are "comma" and "chip" . < / td >
< / tr >
< tr >
< td > selectedItemsLabel < / td >
< td > string < / td >
< td > & # 123 ; 0 & # 125 ; items selected < / td >
< td > Label to display after exceeding max selected labels . < / td >
< / tr >
< tr >
< td > maxSelectedLabels < / td >
< td > number < / td >
< td > null < / td >
< td > Decides how many selected item labels to show at most . < / td >
< / tr >
< tr >
< td > selectionLimit < / td >
< td > number < / td >
< td > null < / td >
< td > Maximum number of selectable items . < / td >
< / tr >
< tr >
< td > showToggleAll < / td >
< td > boolean < / td >
< td > true < / td >
< td > Whether to show the header checkbox to toggle the selection of all items at once . < / td >
< / tr >
< tr >
< td > loading < / td >
< td > boolean < / td >
< td > false < / td >
< td > Whether the multiselect is in loading state . < / td >
< / tr >
< tr >
< td > checkboxIcon < / td >
< td > string < / td >
< td > pi pi - check < / td >
< td > Icon to display in the checkboxes . < / td >
< / tr >
< tr >
< td > closeIcon < / td >
< td > string < / td >
< td > pi pi - times < / td >
< td > Icon to display in the dropdown close button . < / td >
< / tr >
< tr >
< td > dropdownIcon < / td >
< td > string < / td >
< td > pi pi - chevron - down < / td >
< td > Icon to display in dropdown . < / td >
< / tr >
< tr >
< td > filterIcon < / td >
< td > string < / td >
< td > pi pi - search < / td >
< td > Icon to display in filter input . < / td >
< / tr >
< tr >
< td > loadingIcon < / td >
< td > string < / td >
< td > pi pi - spinner pi - spin < / td >
< td > Icon to display in loading state . < / td >
< / tr >
< tr >
< td > removeTokenIcon < / td >
< td > string < / td >
< td > pi pi - times - circle < / td >
< td > Icon to display in chip remove action . < / td >
< / tr >
< tr >
< td > selectAll < / td >
< td > boolean < / td >
< td > false < / td >
< td > Whether all data is selected . < / td >
< / tr >
< tr >
< td > resetFilterOnHide < / td >
< td > boolean < / td >
< td > false < / td >
< td > Clears the filter value when hiding the dropdown . < / td >
< / tr >
< tr >
< td > virtualScrollerOptions < / td >
< td > object < / td >
< td > null < / td >
< td > Whether to use the virtualScroller feature . The properties of < router -link to = "/virtualscroller" > VirtualScroller < / r o u t e r - l i n k > c o m p o n e n t c a n b e u s e d l i k e a n o b j e c t i n i t . < / t d >
< / tr >
< tr >
< td > autoOptionFocus < / td >
< td > boolean < / td >
< td > true < / td >
< td > Whether to focus on the first visible or selected element when the overlay panel is shown . < / td >
< / tr >
< tr >
< td > autoFilterFocus < / td >
< td > boolean < / td >
< td > false < / td >
< td > Whether to focus on the filter element when the overlay panel is shown . < / td >
< / tr >
< tr >
< td > filterMessage < / td >
< td > string < / td >
< td > { 0 } results are available < / td >
< td > Text to be displayed in hidden accessible field when filtering returns any results . Defaults to value from PrimeVue locale configuration . < / td >
< / tr >
< tr >
< td > selectionMessage < / td >
< td > string < / td >
< td > { 0 } items selected < / td >
< td > Text to be displayed in hidden accessible field when options are selected . Defaults to value from PrimeVue locale configuration . < / td >
< / tr >
< tr >
< td > emptySelectionMessage < / td >
< td > string < / td >
< td > No selected item < / td >
< td > Text to be displayed in hidden accessible field when any option is not selected . Defaults to value from PrimeVue locale configuration . < / td >
< / tr >
< tr >
< td > emptyFilterMessage < / td >
< td > string < / td >
< td > No results found < / td >
< td > Text to be displayed when filtering does not return any results . Defaults to value from PrimeVue locale configuration . < / td >
< / tr >
< tr >
< td > emptyMessage < / td >
< td > string < / td >
< td > No results found < / td >
< td > Text to be displayed when there are no options available . Defaults to value from PrimeVue locale configuration . < / td >
< / tr >
< tr >
< td > tabindex < / td >
< td > number < / td >
< td > 0 < / td >
< td > Index of the element in tabbing order . < / td >
< / tr >
< tr >
< td > aria - label < / td >
< td > string < / td >
< td > null < / td >
< td > Defines a string value that labels an interactive element . < / td >
< / tr >
< tr >
< td > aria - labelledby < / td >
< td > string < / td >
< td > null < / td >
< td > Establishes relationships between the component and label ( s ) where its value should be one or more element IDs . < / td >
< / tr >
< / tbody >
< / table >
< / div >
< h5 > Events < / h5 >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Name < / th >
< th > Parameters < / th >
< th > Description < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > change < / td >
< td >
event . originalEvent : Original event < br / >
event . value : Selected option value
< / td >
< td > Callback to invoke on value change . < / td >
< / tr >
< tr >
< td > focus < / td >
< td > event < / td >
< td > Callback to invoke when the component receives focus . < / td >
< / tr >
< tr >
< td > blur < / td >
< td > event < / td >
< td > Callback to invoke when the component loses focus . < / td >
< / tr >
< tr >
< td > before - show < / td >
< td > - < / td >
< td > Callback to invoke before the overlay is shown . < / td >
< / tr >
< tr >
< td > before - hide < / td >
< td > - < / td >
< td > Callback to invoke before the overlay is hidden . < / td >
< / tr >
< tr >
< td > show < / td >
< td > - < / td >
< td > Callback to invoke when the overlay is shown . < / td >
< / tr >
< tr >
< td > hide < / td >
< td > - < / td >
< td > Callback to invoke when the overlay is hidden . < / td >
< / tr >
< tr >
< td > filter < / td >
< td >
event . originalEvent : Original event < br / >
event . value : Filter value
< / td >
< td > Callback to invoke on filter input . < / td >
< / tr >
< tr >
< td > selectall - change < / td >
< td >
event . originalEvent : Original event < br / >
event . checked : Whether all data is selected .
< / td >
< td > Callback to invoke when all data is selected . < / td >
< / tr >
< / tbody >
< / table >
< / div >
< h5 > Methods < / h5 >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Name < / th >
< th > Parameters < / th >
< th > Description < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > show < / td >
< td > isFocus : Decides whether to focus on the component . Default value is false . < / td >
< td > Shows the overlay . < / td >
< / tr >
< tr >
< td > hide < / td >
< td > isFocus : Decides whether to focus on the component . Default value is false . < / td >
< td > Hides the overlay . < / td >
< / tr >
< tr >
< td > clearFilter < / td >
< td > - < / td >
< td > Clears filter input . < / td >
< / tr >
< / tbody >
< / table >
< / div >
< h5 > Slots < / h5 >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Name < / th >
< th > Parameters < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > value < / td >
< td >
value : Value of the component < br / >
placeholder : Placeholder prop value
< / td >
< / tr >
< tr >
< td > chip < / td >
< td > value : A value in the selection < / td >
< / tr >
< tr >
< td > indicator < / td >
< td > - < / td >
< / tr >
< tr >
< td > header < / td >
< td >
value : Value of the component < br / >
options : Displayed options
< / td >
< / tr >
< tr >
< td > footer < / td >
< td >
value : Value of the component < br / >
options : Displayed options
< / td >
< / tr >
< tr >
< td > option < / td >
< td >
option : Option instance < br / >
index : Index of the option
< / td >
< / tr >
< tr >
< td > optiongroup < / td >
< td >
option : OptionGroup instance < br / >
index : Index of the option group
< / td >
< / tr >
< tr >
< td > emptyfilter < / td >
< td > - < / td >
< / tr >
< tr >
< td > empty < / td >
< td > - < / td >
< / tr >
< tr >
< td > content < / td >
< td >
items : An array of objects to display for virtualscroller < br / >
styleClass : Style class of the component < br / >
contentRef : Referance of the content < br / >
getItemOptions : Options of the items
< / td >
< / tr >
< tr >
< td > loader < / td >
< td > options : Options of the loader items for virtualscroller < / td >
< / tr >
< / tbody >
< / table >
< / div >
< h5 > Styling < / h5 >
< p > Following is the list of structural style classes , for theming classes visit < router -link to = "/theming" > theming < / r o u t e r - l i n k > p a g e . < / p >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Name < / th >
< th > Element < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > p - multiselect < / td >
< td > Container element . < / td >
< / tr >
< tr >
< td > p - multiselect - label - container < / td >
< td > Container of the label to display selected items . < / td >
< / tr >
< tr >
< td > p - multiselect - label - container < / td >
< td > Label to display selected items . < / td >
< / tr >
< tr >
< td > p - multiselect - trigger < / td >
< td > Dropdown button . < / td >
< / tr >
< tr >
< td > p - multiselect - filter - container < / td >
< td > Container of filter input . < / td >
< / tr >
< tr >
< td > p - multiselect - panel < / td >
< td > Overlay panel for items . < / td >
< / tr >
< tr >
< td > p - multiselect - items < / td >
< td > List container of items . < / td >
< / tr >
< tr >
< td > p - multiselect - item < / td >
< td > An item in the list . < / td >
< / tr >
< tr >
< td > p - overlay - open < / td >
< td > Container element when overlay is visible . < / td >
< / tr >
< / tbody >
< / table >
< / div >
< h5 > Accessibility < / h5 >
< h6 > Screen Reader < / h6 >
< p >
Value to describe the component can either be provided with < i > aria - labelledby < / i > or < i > aria - label < / i > props . The multiselect component has a < i > combobox < / i > role in addition to < i > aria - haspopup < / i > and < i > aria - expanded < / i > attributes .
The relation between the combobox and the popup is created with < i > aria - controls < / i > attribute that refers to the id of the popup listbox .
< / p >
< p > The popup listbox uses < i > listbox < / i > as the role with < i > aria - multiselectable < / i > enabled . Each list item has an < i > option < / i > role along with < i > aria - label < / i > , < i > aria - selected < / i > and < i > aria - disabled < / i > attributes . < / p >
< p >
Checkbox component at the header uses a hidden native checkbox element internally that is only visible to screen readers . Value to read is defined with the < i > selectAll < / i > and < i > unselectAll < / i > keys of the < i > aria < / i > property from the
< router -link to = "/locale" > locale < / r o u t e r - l i n k > A P I .
< / p >
< p > If filtering is enabled , < i > filterInputProps < / i > can be defined to give < i > aria - * < / i > props to the input element . < / p >
< p > Close button uses < i > close < / i > key of the < i > aria < / i > property from the < router -link to = "/locale" > locale < /router-link> API as the <i>aria-label</i > by default , this can be overriden with the < i > closeButtonProps < / i > . < / p >
< pre v-code > < code >
2022-09-09 20:41:18 +00:00
& lt ; span id = "dd1" & gt ; Options & lt ; / s p a n & g t ;
& lt ; MultiSelect aria - labelledby = "dd1" / & gt ;
& lt ; MultiSelect aria - label = "Options" / & gt ;
< / code > < / pre >
2022-12-08 12:26:57 +00:00
< h6 > Closed State Keyboard Support < / h6 >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Key < / th >
< th > Function < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < i > tab < / i > < / td >
< td > Moves focus to the multiselect element . < / td >
< / tr >
< tr >
< td > < i > space < / i > < / td >
< td > Opens the popup and moves visual focus to the selected option , if there is none then first option receives the focus . < / td >
< / tr >
< tr >
< td > < i > enter < / i > < / td >
< td > Opens the popup and moves visual focus to the selected option , if there is none then first option receives the focus . < / td >
< / tr >
< tr >
< td > < i > down arrow < / i > < / td >
< td > Opens the popup and moves visual focus to the selected option , if there is none then first option receives the focus . < / td >
< / tr >
< tr >
< td > < i > up arrow < / i > < / td >
< td > Opens the popup and moves visual focus to the selected option , if there is none then first option receives the focus . < / td >
< / tr >
< tr >
< td > < i > any printable character < / i > < / td >
< td > Opens the popup and moves focus to the option whose label starts with the characters being typed , if there is none then first option receives the focus . < / td >
< / tr >
< / tbody >
< / table >
< / div >
< h6 > Popup Keyboard Support < / h6 >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Key < / th >
< th > Function < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < i > tab < / i > < / td >
< td > Moves focus to the next focusable element in the popup , if there is none then first focusable element receives the focus . < / td >
< / tr >
< tr >
< td > < i > shift < / i > + < i > tab < / i > < / td >
< td > Moves focus to the previous focusable element in the popup , if there is none then last focusable element receives the focus . < / td >
< / tr >
< tr >
< td > < i > enter < / i > < / td >
< td > Toggles the selection state of the focused option , then moves focus to the multiselect element . < / td >
< / tr >
< tr >
< td > < i > space < / i > < / td >
< td > Toggles the selection state of the focused option , then moves focus to the multiselect element . < / td >
< / tr >
< tr >
< td > < i > escape < / i > < / td >
< td > Closes the popup , moves focus to the multiselect element . < / td >
< / tr >
< tr >
< td > < i > down arrow < / i > < / td >
< td > Moves focus to the next option , if there is none then visual focus does not change . < / td >
< / tr >
< tr >
< td > < i > up arrow < / i > < / td >
< td > Moves focus to the previous option , if there is none then visual focus does not change . < / td >
< / tr >
< tr >
< td > < i > alt < / i > + < i > up arrow < / i > < / td >
< td > Selects the focused option and closes the popup , then moves focus to the multiselect element . < / td >
< / tr >
< tr >
< td > < i > shift < / i > + < i > down arrow < / i > < / td >
< td > Moves focus to the next option and toggles the selection state . < / td >
< / tr >
< tr >
< td > < i > shift < / i > + < i > up arrow < / i > < / td >
< td > Moves focus to the previous option and toggles the selection state . < / td >
< / tr >
< tr >
< td > < i > shift < / i > + < i > space < / i > < / td >
< td > Selects the items between the most recently selected option and the focused option . < / td >
< / tr >
< tr >
< td > < i > home < / i > < / td >
< td > Moves focus to the first option . < / td >
< / tr >
< tr >
< td > < i > end < / i > < / td >
< td > Moves focus to the last option . < / td >
< / tr >
< tr >
< td > < i > control < / i > + < i > shift < / i > + < i > home < / i > < / td >
< td > Selects the focused options and all the options up to the first one . < / td >
< / tr >
< tr >
< td > < i > control < / i > + < i > shift < / i > + < i > end < / i > < / td >
< td > Selects the focused options and all the options down to the last one . < / td >
< / tr >
< tr >
< td > < i > control < / i > + < i > a < / i > < / td >
< td > Selects all options . < / td >
< / tr >
< tr >
< td > < i > pageUp < / i > < / td >
< td > Jumps visual focus to first option . < / td >
< / tr >
< tr >
< td > < i > pageDown < / i > < / td >
< td > Jumps visual focus to last option . < / td >
< / tr >
< tr >
< td > < i > any printable character < / i > < / td >
< td > Moves focus to the option whose label starts with the characters being typed . < / td >
< / tr >
< / tbody >
< / table >
< / div >
< h6 > Toggle All Checkbox Keyboard Support < / h6 >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Key < / th >
< th > Function < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < i > space < / i > < / td >
< td > Toggles the checked state . < / td >
< / tr >
< tr >
< td > < i > escape < / i > < / td >
< td > Closes the popup and moves focus to the multiselect element . < / td >
< / tr >
< / tbody >
< / table >
< / div >
< h6 > Filter Input Keyboard Support < / h6 >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Key < / th >
< th > Function < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < i > down arrow < / i > < / td >
< td > Moves focus to the next option , if there is none then visual focus does not change . < / td >
< / tr >
< tr >
< td > < i > up arrow < / i > < / td >
< td > Moves focus to the previous option , if there is none then visual focus does not change . < / td >
< / tr >
< tr >
< td > < i > left arrow < / i > < / td >
< td > Removes the visual focus from the current option and moves input cursor to one character left . < / td >
< / tr >
< tr >
< td > < i > right arrow < / i > < / td >
< td > Removes the visual focus from the current option and moves input cursor to one character right . < / td >
< / tr >
< tr >
< td > < i > home < / i > < / td >
< td > Moves input cursor at the end , if not then moves focus to the first option . < / td >
< / tr >
< tr >
< td > < i > end < / i > < / td >
< td > Moves input cursor at the beginning , if not then moves focus to the last option . < / td >
< / tr >
< tr >
< td > < i > enter < / i > < / td >
< td > Closes the popup and moves focus to the multiselect element . < / td >
< / tr >
< tr >
< td > < i > escape < / i > < / td >
< td > Closes the popup and moves focus to the multiselect element . < / td >
< / tr >
< tr >
< td > < i > tab < / i > < / td >
< td > Moves focus to the next focusable element in the popup . If there is none , the focusable option is selected and the overlay is closed then moves focus to next element in page . < / td >
< / tr >
< / tbody >
< / table >
< / div >
< h6 > Close Button Keyboard Support < / h6 >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Key < / th >
< th > Function < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < i > enter < / i > < / td >
< td > Closes the popup and moves focus to the multiselect element . < / td >
< / tr >
< tr >
< td > < i > space < / i > < / td >
< td > Closes the popup and moves focus to the multiselect element . < / td >
< / tr >
< tr >
< td > < i > escape < / i > < / td >
< td > Closes the popup and moves focus to the multiselect element . < / td >
< / tr >
< / tbody >
< / table >
< / div >
< h5 > Dependencies < / h5 >
< p > None . < / p >
< / AppDoc >
2022-09-09 20:41:18 +00:00
< / template >
< script >
export default {
data ( ) {
return {
sources : {
'options-api' : {
tabName : 'Options API Source' ,
content : `
< template >
< div >
< h5 > Basic < / h5 >
< MultiSelect v -model = " selectedCities1 " :options ="cities" optionLabel = "name" placeholder = "Select Cities" / >
< h5 > Chips < / h5 >
< MultiSelect v -model = " selectedCities2 " :options ="cities" optionLabel = "name" placeholder = "Select Cities" display = "chip" / >
< h5 > Grouped < / h5 >
< MultiSelect v-model ="selectedGroupedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select Cities" >
< template # optiongroup = "slotProps" >
< div class = "flex align-items-center country-item" >
< img src = "https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class = "mr-2" width = "18" / >
< div > { { slotProps . option . label } } < / div >
< / div >
< / template >
< / MultiSelect >
< h5 > Advanced with Templating and Filtering < / h5 >
< MultiSelect v-model ="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom" >
< template # value = "slotProps" >
< div class = "country-item country-item-value" v-for ="option of slotProps.value" :key="option.code" >
< img src = "https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class = "mr-2" width = "18" / >
< div > { { option . name } } < / div >
< / div >
< template v-if ="!slotProps.value || slotProps.value.length === 0" >
Select Countries
< / template >
< / template >
< template # option = "slotProps" >
< div class = "country-item" >
< img src = "https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class = "mr-2" width = "18" / >
< div > { { slotProps . option . name } } < / div >
< / div >
< / template >
< / MultiSelect >
< h5 > Loading State < / h5 >
< MultiSelect placeholder = "Loading..." loading > < / MultiSelect >
< h5 > Virtual Scroll ( 1000 Items ) < / h5 >
< MultiSelect v -model = " selectedItems " :options ="items" :maxSelectedLabels ="3" :selectAll ="selectAll" @selectall-change ="onSelectAllChange($event)" @change ="onChange($event)" optionLabel = "label" optionValue = "value" : virtualScrollerOptions = "{ itemSize: 44 }" placeholder = "Select Item" / >
< / div >
< / template >
< script >
export default {
data ( ) {
return {
selectedCities1 : null ,
selectedCities2 : null ,
selectedCountries : null ,
selectedGroupedCities : null ,
selectedItems : null ,
selectAll : false ,
cities : [
{ name : 'New York' , code : 'NY' } ,
{ name : 'Rome' , code : 'RM' } ,
{ name : 'London' , code : 'LDN' } ,
{ name : 'Istanbul' , code : 'IST' } ,
{ name : 'Paris' , code : 'PRS' }
] ,
countries : [
{ name : 'Australia' , code : 'AU' } ,
{ name : 'Brazil' , code : 'BR' } ,
{ name : 'China' , code : 'CN' } ,
{ name : 'Egypt' , code : 'EG' } ,
{ name : 'France' , code : 'FR' } ,
{ name : 'Germany' , code : 'DE' } ,
{ name : 'India' , code : 'IN' } ,
{ name : 'Japan' , code : 'JP' } ,
{ name : 'Spain' , code : 'ES' } ,
{ name : 'United States' , code : 'US' }
] ,
groupedCities : [ {
label : 'Germany' , code : 'DE' ,
items : [
{ label : 'Berlin' , value : 'Berlin' } ,
{ label : 'Frankfurt' , value : 'Frankfurt' } ,
{ label : 'Hamburg' , value : 'Hamburg' } ,
{ label : 'Munich' , value : 'Munich' }
]
} ,
{
label : 'USA' , code : 'US' ,
items : [
{ label : 'Chicago' , value : 'Chicago' } ,
{ label : 'Los Angeles' , value : 'Los Angeles' } ,
{ label : 'New York' , value : 'New York' } ,
{ label : 'San Francisco' , value : 'San Francisco' }
]
} ,
{
label : 'Japan' , code : 'JP' ,
items : [
{ label : 'Kyoto' , value : 'Kyoto' } ,
{ label : 'Osaka' , value : 'Osaka' } ,
{ label : 'Tokyo' , value : 'Tokyo' } ,
{ label : 'Yokohama' , value : 'Yokohama' }
]
} ] ,
items : Array . from ( { length : 1000 } , ( _ , i ) => ( { label : \ ` Item # \ ${ i } \` , value: i }))
}
} ,
methods : {
onSelectAllChange ( event ) {
this . selectedItems = event . checked ? this . items . map ( ( item ) => item . value ) : [ ] ;
this . selectAll = event . checked ;
} ,
onChange ( event ) {
this . selectAll = event . value . length === this . items . length
}
}
}
< \ \ / script >
< style lang = "scss" scoped >
. p - multiselect {
width : 18 rem ;
}
: : v - deep ( . multiselect - custom ) {
. p - multiselect - label : not ( . p - placeholder ) {
padding - top : .25 rem ;
padding - bottom : .25 rem ;
}
. country - item - value {
padding : .25 rem .5 rem ;
border - radius : 3 px ;
display : inline - flex ;
margin - right : .5 rem ;
background - color : var ( -- primary - color ) ;
color : var ( -- primary - color - text ) ;
img . flag {
width : 17 px ;
}
}
}
@ media screen and ( max - width : 640 px ) {
. p - multiselect {
width : 100 % ;
}
}
< / style > `
} ,
'composition-api' : {
tabName : 'Composition API Source' ,
content : `
< template >
< div >
< h5 > Basic < / h5 >
< MultiSelect v -model = " selectedCities1 " :options ="cities" optionLabel = "name" placeholder = "Select Cities" / >
< h5 > Chips < / h5 >
< MultiSelect v -model = " selectedCities2 " :options ="cities" optionLabel = "name" placeholder = "Select Cities" display = "chip" / >
< h5 > Grouped < / h5 >
< MultiSelect v-model ="selectedGroupedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select Cities" >
< template # optiongroup = "slotProps" >
< div class = "flex align-items-center country-item" >
< img src = "https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class = "mr-2" width = "18" / >
< div > { { slotProps . option . label } } < / div >
< / div >
< / template >
< / MultiSelect >
< h5 > Advanced with Templating and Filtering < / h5 >
< MultiSelect v-model ="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom" >
< template # value = "slotProps" >
< div class = "country-item country-item-value" v-for ="option of slotProps.value" :key="option.code" >
< img src = "https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class = "mr-2" width = "18" / >
< div > { { option . name } } < / div >
< / div >
< template v-if ="!slotProps.value || slotProps.value.length === 0" >
Select Countries
< / template >
< / template >
< template # option = "slotProps" >
< div class = "country-item" >
< img src = "https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class = "mr-2" width = "18" / >
< div > { { slotProps . option . name } } < / div >
< / div >
< / template >
< / MultiSelect >
< h5 > Loading State < / h5 >
< MultiSelect placeholder = "Loading..." loading > < / MultiSelect >
< h5 > Virtual Scroll ( 1000 Items ) < / h5 >
< MultiSelect v -model = " selectedItems " :options ="items" :maxSelectedLabels ="3" :selectAll ="selectAll" @selectall-change ="onSelectAllChange($event)" @change ="onChange($event)" optionLabel = "label" optionValue = "value" : virtualScrollerOptions = "{ itemSize: 44 }" placeholder = "Select Item" / >
< / div >
< / template >
< script >
import { ref } from 'vue' ;
export default {
setup ( ) {
const selectedCities1 = ref ( ) ;
const selectedCities2 = ref ( ) ;
const selectedCountries = ref ( ) ;
const selectedGroupedCities = ref ( ) ;
const selectedItems = ref ( ) ;
const selectAll = ref ( false ) ;
const cities = ref ( [
{ name : 'New York' , code : 'NY' } ,
{ name : 'Rome' , code : 'RM' } ,
{ name : 'London' , code : 'LDN' } ,
{ name : 'Istanbul' , code : 'IST' } ,
{ name : 'Paris' , code : 'PRS' }
] ) ;
const countries = ref ( [
{ name : 'Australia' , code : 'AU' } ,
{ name : 'Brazil' , code : 'BR' } ,
{ name : 'China' , code : 'CN' } ,
{ name : 'Egypt' , code : 'EG' } ,
{ name : 'France' , code : 'FR' } ,
{ name : 'Germany' , code : 'DE' } ,
{ name : 'India' , code : 'IN' } ,
{ name : 'Japan' , code : 'JP' } ,
{ name : 'Spain' , code : 'ES' } ,
{ name : 'United States' , code : 'US' }
] ) ;
const groupedCities = ref ( [
{
label : 'Germany' , code : 'DE' ,
items : [
{ label : 'Berlin' , value : 'Berlin' } ,
{ label : 'Frankfurt' , value : 'Frankfurt' } ,
{ label : 'Hamburg' , value : 'Hamburg' } ,
{ label : 'Munich' , value : 'Munich' }
]
} ,
{
label : 'USA' , code : 'US' ,
items : [
{ label : 'Chicago' , value : 'Chicago' } ,
{ label : 'Los Angeles' , value : 'Los Angeles' } ,
{ label : 'New York' , value : 'New York' } ,
{ label : 'San Francisco' , value : 'San Francisco' }
]
} ,
{
label : 'Japan' , code : 'JP' ,
items : [
{ label : 'Kyoto' , value : 'Kyoto' } ,
{ label : 'Osaka' , value : 'Osaka' } ,
{ label : 'Tokyo' , value : 'Tokyo' } ,
{ label : 'Yokohama' , value : 'Yokohama' }
]
}
] ) ;
const items = Array . from ( { length : 1000 } , ( _ , i ) => ( { label : \ ` Item # \ ${ i } \` , value: i }))
return { selectedCities1 , selectedCities2 , selectedCountries , selectedGroupedCities , cities , countries , groupedCities , items , selectedItems , selectAll }
} ,
methods : {
onSelectAllChange ( event ) {
this . selectedItems = event . checked ? this . items . map ( ( item ) => item . value ) : [ ] ;
this . selectAll = event . checked ;
} ,
onChange ( event ) {
this . selectAll = event . value . length === this . items . length
}
}
}
< \ \ / script >
< style lang = "scss" scoped >
. p - multiselect {
width : 18 rem ;
}
: : v - deep ( . multiselect - custom ) {
. p - multiselect - label : not ( . p - placeholder ) {
padding - top : .25 rem ;
padding - bottom : .25 rem ;
}
. country - item - value {
padding : .25 rem .5 rem ;
border - radius : 3 px ;
display : inline - flex ;
margin - right : .5 rem ;
background - color : var ( -- primary - color ) ;
color : var ( -- primary - color - text ) ;
img . flag {
width : 17 px ;
}
}
}
@ media screen and ( max - width : 640 px ) {
. p - multiselect {
width : 100 % ;
}
}
< / style > `
} ,
'browser-source' : {
tabName : 'Browser Source' ,
imports : ` <script src="https://unpkg.com/primevue@^3/multiselect/multiselect.min.js">< \\ /script> ` ,
content : ` <div id="app">
< h5 > Basic < / h5 >
< p -multiselect v-model ="selectedCities1" :options="cities" option-label="name" placeholder="Select Cities" > < / p -multiselect >
< h5 > Chips < / h5 >
< p -multiselect v-model ="selectedCities2" :options="cities" option-label="name" placeholder="Select Cities" display="chip" > < / p -multiselect >
< h5 > Grouped < / h5 >
< p -multiselect v-model ="selectedGroupedCities" :options="groupedCities" option-label="label" option-group-label="label" option-group-children="items" placeholder="Select Cities" >
< template # optiongroup = "slotProps" >
< div class = "flex align-items-center country-item" >
< img src = "https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class = "mr-2" width = "18" / >
< div > { { slotProps . option . label } } < / div >
< / div >
< / template >
< / p - m u l t i s e l e c t >
< h5 > Advanced with Templating and Filtering < / h5 >
< p -multiselect v-model ="selectedCountries" :options="countries" option-label="name" placeholder="Select Countries" :filter="true" class="multiselect-custom" >
< template # value = "slotProps" >
< div class = "country-item country-item-value" v-for ="option of slotProps.value" :key="option.code" >
< img src = "https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class = "mr-2" width = "18" / >
< div > { { option . name } } < / div >
< / div >
< template v-if ="!slotProps.value || slotProps.value.length === 0" >
Select Countries
< / template >
< / template >
< template # option = "slotProps" >
< div class = "country-item" >
< img src = "https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class = "mr-2" width = "18" / >
< div > { { slotProps . option . name } } < / div >
< / div >
< / template >
< / p - m u l t i s e l e c t >
< h5 > Loading State < / h5 >
< p -multiselect placeholder = "Loading..." loading > < / p - m u l t i s e l e c t >
< h5 > Virtual Scroll ( 1000 Items ) < / h5 >
< p -multiselect v-model ="selectedItems" :options="items" :max-selected-labels="3" :select-all="selectAll" @selectall-change="onSelectAllChange($event)" @change="onChange($event)" option-label="label" option-value="value" :virtual-scroller-options="{ itemSize: 44 }" placeholder="Select Item" > < / p -multiselect >
< / div >
< script type = "module" >
const { createApp , ref } = Vue ;
const App = {
setup ( ) {
const selectedCities1 = ref ( ) ;
const selectedCities2 = ref ( ) ;
const selectedCountries = ref ( ) ;
const selectedGroupedCities = ref ( ) ;
const selectedItems = ref ( ) ;
const selectAll = ref ( false ) ;
const cities = ref ( [
{ name : 'New York' , code : 'NY' } ,
{ name : 'Rome' , code : 'RM' } ,
{ name : 'London' , code : 'LDN' } ,
{ name : 'Istanbul' , code : 'IST' } ,
{ name : 'Paris' , code : 'PRS' }
] ) ;
const countries = ref ( [
{ name : 'Australia' , code : 'AU' } ,
{ name : 'Brazil' , code : 'BR' } ,
{ name : 'China' , code : 'CN' } ,
{ name : 'Egypt' , code : 'EG' } ,
{ name : 'France' , code : 'FR' } ,
{ name : 'Germany' , code : 'DE' } ,
{ name : 'India' , code : 'IN' } ,
{ name : 'Japan' , code : 'JP' } ,
{ name : 'Spain' , code : 'ES' } ,
{ name : 'United States' , code : 'US' }
] ) ;
const groupedCities = ref ( [
{
label : 'Germany' , code : 'DE' ,
items : [
{ label : 'Berlin' , value : 'Berlin' } ,
{ label : 'Frankfurt' , value : 'Frankfurt' } ,
{ label : 'Hamburg' , value : 'Hamburg' } ,
{ label : 'Munich' , value : 'Munich' }
]
} ,
{
label : 'USA' , code : 'US' ,
items : [
{ label : 'Chicago' , value : 'Chicago' } ,
{ label : 'Los Angeles' , value : 'Los Angeles' } ,
{ label : 'New York' , value : 'New York' } ,
{ label : 'San Francisco' , value : 'San Francisco' }
]
} ,
{
label : 'Japan' , code : 'JP' ,
items : [
{ label : 'Kyoto' , value : 'Kyoto' } ,
{ label : 'Osaka' , value : 'Osaka' } ,
{ label : 'Tokyo' , value : 'Tokyo' } ,
{ label : 'Yokohama' , value : 'Yokohama' }
]
}
] ) ;
const items = Array . from ( { length : 1000 } , ( _ , i ) => ( { label : \ ` Item # \ ${ i } \` , value: i }))
return { selectedCities1 , selectedCities2 , selectedCountries , selectedGroupedCities , cities , countries , groupedCities , items , selectedItems , selectAll }
} ,
methods : {
onSelectAllChange ( event ) {
this . selectedItems = event . checked ? this . items . map ( ( item ) => item . value ) : [ ] ;
this . selectAll = event . checked ;
} ,
onChange ( event ) {
this . selectAll = event . value . length === this . items . length
}
} ,
components : {
"p-multiselect" : primevue . multiselect
}
} ;
createApp ( App )
. use ( primevue . config . default )
. mount ( "#app" ) ;
< \ \ / script >
< style >
. p - multiselect {
width : 18 rem ;
}
. multiselect - custom . p - multiselect - label : not ( . p - placeholder ) {
padding - top : .25 rem ;
padding - bottom : .25 rem ;
}
. multiselect - custom . country - item - value {
padding : .25 rem .5 rem ;
border - radius : 3 px ;
display : inline - flex ;
margin - right : .5 rem ;
background - color : var ( -- primary - color ) ;
color : var ( -- primary - color - text ) ;
}
. multiselect - custom . country - item - value img . flag {
width : 17 px ;
}
@ media screen and ( max - width : 640 px ) {
. p - multiselect {
width : 100 % ;
}
}
< / style > `
}
}
} ;
}
} ;
< / script >
