Компоненты PrimeNG
Multiselect

Множественный выбор

PrimeNG/MultiSelect (opens in a new tab)

Multiselect используется для выбора нескольких элементов из коллекции.

С чего начать

Подключите модуль

import { MultiSelectModule } from 'primeng/multiselect';

В .ts файле

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-prime-multiselect',
  templateUrl: './prime-multiselect.component.html',
  styleUrls: ['./prime-multiselect.component.scss']
})
export class PrimeMultiselectComponent implements OnInit {
 
  selectedCities: string[] = [];
  selectedCities1: string[] = [];
  selectedCities2: string[] = [];
  selectedCities3: string[] = [];
  selectedCities4: string[] = [];
  cities: any[] = [];
  selectedCountries1: string[] = [];
  selectedCountries2: string[] = [];
  countries: any[] = [];
  virtualCountries: any[] = [];
  groupedCities: any[] = [];
 
  selectedCitiesXs: string[] = [];
  selectedCitiesSm: string[] = [];
  selectedCitiesDe: string[] = [];
  selectedCitiesLg: string[] = [];
 
  constructor() {
    this.cities = [
      { name: 'New York', code: 'NY' },
      { name: 'Rome', code: 'RM' },
      { name: 'London', code: 'LDN' },
      { name: 'Istanbul', code: 'IST' },
      { name: 'Milan', code: 'PRS' },
      { name: 'Tokyo', code: 'PRS' },
      { name: 'Moscow', code: 'PRS' },
      { name: 'Venice', code: 'PRS' },
      { name: 'Berlin', code: 'PRS' },
    ];
 
    this.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' }
    ];
 
    this.groupedCities = [
      {
        label: 'Germany', value: 'de',
        items: [
          { label: 'Berlin', value: 'Berlin' },
          { label: 'Frankfurt', value: 'Frankfurt' },
          { label: 'Hamburg', value: 'Hamburg' },
          { label: 'Munich', value: 'Munich' }
        ]
      },
      {
        label: 'USA', value: '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', value: 'jp',
        items: [
          { label: 'Kyoto', value: 'Kyoto' },
          { label: 'Osaka', value: 'Osaka' },
          { label: 'Tokyo', value: 'Tokyo' },
          { label: 'Yokohama', value: 'Yokohama' }
        ]
      }
    ];
 
    this.virtualCountries = [
      { name: 'Afghanistan', 'code': 'AF' },
      { name: 'Åland Islands', 'code': 'AX' },
      { name: 'Albania', 'code': 'AL' },
      { name: 'Algeria', 'code': 'DZ' },
      { name: 'American Samoa', 'code': 'AS' },
      { name: 'Andorra', 'code': 'AD' },
      { name: 'Angola', 'code': 'AO' },
      { name: 'Anguilla', 'code': 'AI' },
      { name: 'Antarctica', 'code': 'AQ' },
      { name: 'Antigua and Barbuda', 'code': 'AG' },
      { name: 'Argentina', 'code': 'AR' },
      { name: 'Armenia', 'code': 'AM' },
      { name: 'Aruba', 'code': 'AW' },
      { name: 'Australia', 'code': 'AU' },
      { name: 'Austria', 'code': 'AT' },
      { name: 'Azerbaijan', 'code': 'AZ' },
      { name: 'Bahamas', 'code': 'BS' },
      { name: 'Bahrain', 'code': 'BH' },
      { name: 'Bangladesh', 'code': 'BD' },
      { name: 'Barbados', 'code': 'BB' },
      { name: 'Belarus', 'code': 'BY' },
      { name: 'Belgium', 'code': 'BE' },
      { name: 'Belize', 'code': 'BZ' },
      { name: 'Benin', 'code': 'BJ' },
      { name: 'Bermuda', 'code': 'BM' },
      { name: 'Bhutan', 'code': 'BT' },
      { name: 'Bolivia', 'code': 'BO' },
      { name: 'Bosnia and Herzegovina', 'code': 'BA' },
      { name: 'Botswana', 'code': 'BW' },
      { name: 'Bouvet Island', 'code': 'BV' },
      { name: 'Brazil', 'code': 'BR' },
      { name: 'British Indian Ocean Territory', 'code': 'IO' },
      { name: 'Brunei Darussalam', 'code': 'BN' },
      { name: 'Bulgaria', 'code': 'BG' },
      { name: 'Burkina Faso', 'code': 'BF' },
      { name: 'Burundi', 'code': 'BI' },
      { name: 'Cambodia', 'code': 'KH' },
      { name: 'Cameroon', 'code': 'CM' },
      { name: 'Canada', 'code': 'CA' },
      { name: 'Cape Verde', 'code': 'CV' },
      { name: 'Cayman Islands', 'code': 'KY' },
      { name: 'Central African Republic', 'code': 'CF' },
      { name: 'Chad', 'code': 'TD' },
      { name: 'Chile', 'code': 'CL' },
      { name: 'China', 'code': 'CN' },
      { name: 'Christmas Island', 'code': 'CX' },
      { name: 'Cocos (Keeling) Islands', 'code': 'CC' },
      { name: 'Colombia', 'code': 'CO' },
      { name: 'Comoros', 'code': 'KM' },
      { name: 'Congo', 'code': 'CG' },
      { name: 'Congo, The Democratic Republic of the', 'code': 'CD' },
      { name: 'Cook Islands', 'code': 'CK' },
      { name: 'Costa Rica', 'code': 'CR' },
      { name: 'Cote D\'Ivoire', 'code': 'CI' },
      { name: 'Croatia', 'code': 'HR' },
      { name: 'Cuba', 'code': 'CU' },
      { name: 'Cyprus', 'code': 'CY' },
      { name: 'Czech Republic', 'code': 'CZ' },
      { name: 'Denmark', 'code': 'DK' },
      { name: 'Djibouti', 'code': 'DJ' },
      { name: 'Dominica', 'code': 'DM' },
      { name: 'Dominican Republic', 'code': 'DO' },
      { name: 'Ecuador', 'code': 'EC' },
      { name: 'Egypt', 'code': 'EG' },
      { name: 'El Salvador', 'code': 'SV' },
      { name: 'Equatorial Guinea', 'code': 'GQ' },
      { name: 'Eritrea', 'code': 'ER' },
      { name: 'Estonia', 'code': 'EE' },
      { name: 'Ethiopia', 'code': 'ET' },
      { name: 'Falkland Islands (Malvinas)', 'code': 'FK' },
      { name: 'Faroe Islands', 'code': 'FO' },
      { name: 'Fiji', 'code': 'FJ' },
      { name: 'Finland', 'code': 'FI' },
      { name: 'France', 'code': 'FR' },
      { name: 'French Guiana', 'code': 'GF' },
      { name: 'French Polynesia', 'code': 'PF' },
      { name: 'French Southern Territories', 'code': 'TF' },
      { name: 'Gabon', 'code': 'GA' },
      { name: 'Gambia', 'code': 'GM' },
      { name: 'Georgia', 'code': 'GE' },
      { name: 'Germany', 'code': 'DE' },
      { name: 'Ghana', 'code': 'GH' },
      { name: 'Gibraltar', 'code': 'GI' },
      { name: 'Greece', 'code': 'GR' },
      { name: 'Greenland', 'code': 'GL' },
      { name: 'Grenada', 'code': 'GD' },
      { name: 'Guadeloupe', 'code': 'GP' },
      { name: 'Guam', 'code': 'GU' },
      { name: 'Guatemala', 'code': 'GT' },
      { name: 'Guernsey', 'code': 'GG' },
      { name: 'Guinea', 'code': 'GN' },
      { name: 'Guinea-Bissau', 'code': 'GW' },
      { name: 'Guyana', 'code': 'GY' },
      { name: 'Haiti', 'code': 'HT' },
      { name: 'Heard Island and Mcdonald Islands', 'code': 'HM' },
      { name: 'Holy See (Vatican City State)', 'code': 'VA' },
      { name: 'Honduras', 'code': 'HN' },
      { name: 'Hong Kong', 'code': 'HK' },
      { name: 'Hungary', 'code': 'HU' },
      { name: 'Iceland', 'code': 'IS' },
      { name: 'India', 'code': 'IN' },
      { name: 'Indonesia', 'code': 'ID' },
      { name: 'Iran, Islamic Republic Of', 'code': 'IR' },
      { name: 'Iraq', 'code': 'IQ' },
      { name: 'Ireland', 'code': 'IE' },
      { name: 'Isle of Man', 'code': 'IM' },
      { name: 'Israel', 'code': 'IL' },
      { name: 'Italy', 'code': 'IT' },
      { name: 'Jamaica', 'code': 'JM' },
      { name: 'Japan', 'code': 'JP' },
      { name: 'Jersey', 'code': 'JE' },
      { name: 'Jordan', 'code': 'JO' },
      { name: 'Kazakhstan', 'code': 'KZ' },
      { name: 'Kenya', 'code': 'KE' },
      { name: 'Kiribati', 'code': 'KI' },
      { name: 'Korea, Democratic People\'S Republic of', 'code': 'KP' },
      { name: 'Korea, Republic of', 'code': 'KR' },
      { name: 'Kuwait', 'code': 'KW' },
      { name: 'Kyrgyzstan', 'code': 'KG' },
      { name: 'Lao People\'S Democratic Republic', 'code': 'LA' },
      { name: 'Latvia', 'code': 'LV' },
      { name: 'Lebanon', 'code': 'LB' },
      { name: 'Lesotho', 'code': 'LS' },
      { name: 'Liberia', 'code': 'LR' },
      { name: 'Libyan Arab Jamahiriya', 'code': 'LY' },
      { name: 'Liechtenstein', 'code': 'LI' },
      { name: 'Lithuania', 'code': 'LT' },
      { name: 'Luxembourg', 'code': 'LU' },
      { name: 'Macao', 'code': 'MO' },
      { name: 'Macedonia, The Former Yugoslav Republic of', 'code': 'MK' },
      { name: 'Madagascar', 'code': 'MG' },
      { name: 'Malawi', 'code': 'MW' },
      { name: 'Malaysia', 'code': 'MY' },
      { name: 'Maldives', 'code': 'MV' },
      { name: 'Mali', 'code': 'ML' },
      { name: 'Malta', 'code': 'MT' },
      { name: 'Marshall Islands', 'code': 'MH' },
      { name: 'Martinique', 'code': 'MQ' },
      { name: 'Mauritania', 'code': 'MR' },
      { name: 'Mauritius', 'code': 'MU' },
      { name: 'Mayotte', 'code': 'YT' },
      { name: 'Mexico', 'code': 'MX' },
      { name: 'Micronesia, Federated States of', 'code': 'FM' },
      { name: 'Moldova, Republic of', 'code': 'MD' },
      { name: 'Monaco', 'code': 'MC' },
      { name: 'Mongolia', 'code': 'MN' },
      { name: 'Montserrat', 'code': 'MS' },
      { name: 'Morocco', 'code': 'MA' },
      { name: 'Mozambique', 'code': 'MZ' },
      { name: 'Myanmar', 'code': 'MM' },
      { name: 'Namibia', 'code': 'NA' },
      { name: 'Nauru', 'code': 'NR' },
      { name: 'Nepal', 'code': 'NP' },
      { name: 'Netherlands', 'code': 'NL' },
      { name: 'Netherlands Antilles', 'code': 'AN' },
      { name: 'New Caledonia', 'code': 'NC' },
      { name: 'New Zealand', 'code': 'NZ' },
      { name: 'Nicaragua', 'code': 'NI' },
      { name: 'Niger', 'code': 'NE' },
      { name: 'Nigeria', 'code': 'NG' },
      { name: 'Niue', 'code': 'NU' },
      { name: 'Norfolk Island', 'code': 'NF' },
      { name: 'Northern Mariana Islands', 'code': 'MP' },
      { name: 'Norway', 'code': 'NO' },
      { name: 'Oman', 'code': 'OM' },
      { name: 'Pakistan', 'code': 'PK' },
      { name: 'Palau', 'code': 'PW' },
      { name: 'Palestinian Territory, Occupied', 'code': 'PS' },
      { name: 'Panama', 'code': 'PA' },
      { name: 'Papua New Guinea', 'code': 'PG' },
      { name: 'Paraguay', 'code': 'PY' },
      { name: 'Peru', 'code': 'PE' },
      { name: 'Philippines', 'code': 'PH' },
      { name: 'Pitcairn', 'code': 'PN' },
      { name: 'Poland', 'code': 'PL' },
      { name: 'Portugal', 'code': 'PT' },
      { name: 'Puerto Rico', 'code': 'PR' },
      { name: 'Qatar', 'code': 'QA' },
      { name: 'Reunion', 'code': 'RE' },
      { name: 'Romania', 'code': 'RO' },
      { name: 'Russian Federation', 'code': 'RU' },
      { name: 'RWANDA', 'code': 'RW' },
      { name: 'Saint Helena', 'code': 'SH' },
      { name: 'Saint Kitts and Nevis', 'code': 'KN' },
      { name: 'Saint Lucia', 'code': 'LC' },
      { name: 'Saint Pierre and Miquelon', 'code': 'PM' },
      { name: 'Saint Vincent and the Grenadines', 'code': 'VC' },
      { name: 'Samoa', 'code': 'WS' },
      { name: 'San Marino', 'code': 'SM' },
      { name: 'Sao Tome and Principe', 'code': 'ST' },
      { name: 'Saudi Arabia', 'code': 'SA' },
      { name: 'Senegal', 'code': 'SN' },
      { name: 'Serbia and Montenegro', 'code': 'CS' },
      { name: 'Seychelles', 'code': 'SC' },
      { name: 'Sierra Leone', 'code': 'SL' },
      { name: 'Singapore', 'code': 'SG' },
      { name: 'Slovakia', 'code': 'SK' },
      { name: 'Slovenia', 'code': 'SI' },
      { name: 'Solomon Islands', 'code': 'SB' },
      { name: 'Somalia', 'code': 'SO' },
      { name: 'South Africa', 'code': 'ZA' },
      { name: 'South Georgia and the South Sandwich Islands', 'code': 'GS' },
      { name: 'Spain', 'code': 'ES' },
      { name: 'Sri Lanka', 'code': 'LK' },
      { name: 'Sudan', 'code': 'SD' },
      { name: 'Suriname', 'code': 'SR' },
      { name: 'Svalbard and Jan Mayen', 'code': 'SJ' },
      { name: 'Swaziland', 'code': 'SZ' },
      { name: 'Sweden', 'code': 'SE' },
      { name: 'Switzerland', 'code': 'CH' },
      { name: 'Syrian Arab Republic', 'code': 'SY' },
      { name: 'Taiwan, Republic of China', 'code': 'TW' },
      { name: 'Tajikistan', 'code': 'TJ' },
      { name: 'Tanzania, United Republic of', 'code': 'TZ' },
      { name: 'Thailand', 'code': 'TH' },
      { name: 'Timor-Leste', 'code': 'TL' },
      { name: 'Togo', 'code': 'TG' },
      { name: 'Tokelau', 'code': 'TK' },
      { name: 'Tonga', 'code': 'TO' },
      { name: 'Trinidad and Tobago', 'code': 'TT' },
      { name: 'Tunisia', 'code': 'TN' },
      { name: 'Turkey', 'code': 'TR' },
      { name: 'Turkmenistan', 'code': 'TM' },
      { name: 'Turks and Caicos Islands', 'code': 'TC' },
      { name: 'Tuvalu', 'code': 'TV' },
      { name: 'Uganda', 'code': 'UG' },
      { name: 'Ukraine', 'code': 'UA' },
      { name: 'United Arab Emirates', 'code': 'AE' },
      { name: 'United Kingdom', 'code': 'GB' },
      { name: 'United States', 'code': 'US' },
      { name: 'United States Minor Outlying Islands', 'code': 'UM' },
      { name: 'Uruguay', 'code': 'UY' },
      { name: 'Uzbekistan', 'code': 'UZ' },
      { name: 'Vanuatu', 'code': 'VU' },
      { name: 'Venezuela', 'code': 'VE' },
      { name: 'Viet Nam', 'code': 'VN' },
      { name: 'Virgin Islands, British', 'code': 'VG' },
      { name: 'Virgin Islands, U.S.', 'code': 'VI' },
      { name: 'Wallis and Futuna', 'code': 'WF' },
      { name: 'Western Sahara', 'code': 'EH' },
      { name: 'Yemen', 'code': 'YE' },
      { name: 'Zambia', 'code': 'ZM' },
      { name: 'Zimbabwe', 'code': 'ZW' }
    ];
  }
 
  ngOnInit(): void {
  }
 
}

Встройте компонент с помощью тэга p-multiSelect.

<p-multiSelect [options]="cities" [(ngModel)]="selectedCities1" defaultLabel="Select a City" optionLabel="name" selectedItemsLabel="{0} items selected"></p-multiSelect>

Template Mode

<p-multiSelect [options]="cities" [(ngModel)]="selectedCities1" defaultLabel="Select a City" optionLabel="name" selectedItemsLabel="{0} items selected"></p-multiSelect>

Elipsis Mode

<p-multiSelect [options]="cities" [(ngModel)]="selectedCities2" defaultLabel="Select a City" optionLabel="name"></p-multiSelect>

Chips

<p-multiSelect [options]="cities" [(ngModel)]="selectedCities3" defaultLabel="Select a City" optionLabel="name" display="chip"></p-multiSelect>

Grouped

group.label

<p-multiSelect [options]="groupedCities" [group]="true" [(ngModel)]="selectedCities4" defaultLabel="Select a City" scrollHeight="250px" display="chip">
  <ng-template let-group pTemplate="group">
    <div class="p-d-flex p-ai-center">
      <span> { { group.label } } </span>
    </div>
  </ng-template>
</p-multiSelect>

Advanced with Templating and Filtering

option.name Select Countries country.name

<p-multiSelect [options]="countries" [(ngModel)]="selectedCountries1" defaultLabel="Select a Country" optionLabel="name" class="multiselect-custom">
  <ng-template let-value pTemplate="selectedItems">
    <div class="country-item country-item-value" *ngFor="let option of selectedCountries1">
      <div> { { option.name } } </div>
    </div>
    <div *ngIf="!selectedCountries1 || selectedCountries1.length === 0" class="country-placeholder">
      Select Countries
    </div>
  </ng-template>
  <ng-template let-country pTemplate="item">
    <div class="country-item">
      <div> { { country.name } } </div>
    </div>
  </ng-template>
</p-multiSelect>

Virtual Scroll

country.name

<p-multiSelect [options]="virtualCountries" [showToggleAll]="false" [(ngModel)]="selectedCountries2" optionLabel="name" [virtualScroll]="true" [filter]="true" [itemSize]="34" class="multiselect-custom-virtual-scroll">
  <ng-template let-country pTemplate="item">
    <div class="country-item">
      <div> { { country.name } } </div>
    </div>
  </ng-template>
</p-multiSelect>

Размеры

<p-multiSelect
  [options]="cities"
  [(ngModel)]="selectedCitiesXs"
  defaultLabel="Extra small"
  optionLabel="name"
  class="p-multiselect-xs"
></p-multiSelect>
 
<p-multiSelect
  [options]="cities"
  [(ngModel)]="selectedCitiesSm"
  defaultLabel="Small"
  optionLabel="name"
  class="p-multiselect-sm"
></p-multiSelect>
 
<p-multiSelect [options]="cities" [(ngModel)]="selectedCitiesDe" defaultLabel="Default" optionLabel="name"></p-multiSelect>
 
<p-multiSelect
  [options]="cities"
  [(ngModel)]="selectedCitiesLg"
  defaultLabel="Large"
  optionLabel="name"
  class="p-multiselect-lg"
></p-multiSelect>

Float Label

Basic

<span class="p-float-label">
  <p-multiSelect [options]="cities" [(ngModel)]="selectedCities1" optionLabel="name" selectedItemsLabel="{0} items selected" inputId="basic"></p-multiSelect>
  <label for="basic">Basic</label>
</span>

Свойства

NameTypeDefaultDescription
appendToanynullTarget element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
ariaFilterLabelstringnullDefines a string that labels the filter input.
ariaLabelledBystringnullEstablishes relationships between the component and label(s) where its value should be one or more element IDs.
autofocusFilterbooleanfalseApplies focus to the filter element when the overlay is shown.
autoZIndexbooleantrueWhether to automatically manage layering.
baseZIndexnumber0Base zIndex value to use in layering.
defaultLabelstringChooseLabel to display when there are no selections. Deprecated: Use placeholder instead.
dataKeystringnullA property to uniquely identify a value in options.
disabledbooleanfalseWhen present, it specifies that the element should be disabled.
displaySelectedLabelbooleantrueWhether to show labels of selected item labels or use default label.
dropdownIconstringpi pi-chevron-downIcon class of the dropdown icon.
emptyFilterMessagestringNo results foundText to display when filtering does not return any results.
filterbooleantrueWhen specified, displays an input field to filter the items on keyup.
filterMatchModestringcontainsDefines how the items are filtered, valid values are "contains" (default) "startsWith", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt" and "gte".
filterValuestringnullWhen specified, filter displays with this value.
filterLocalestringundefinedLocale to use in filtering. The default locale is the host environment's current locale.
filterBystringnullWhen filtering is enabled, filterBy decides which field or fields (comma separated) to search against.
filterPlaceHolderstringnullDefines placeholder of the filter input.
hideTransitionOptionsstring.1s linearTransition options of the hide animation.
inputIdstringnullIdentifier of the focus input to match a label defined for the component.
itemSizenumbernullHeight of an item in the list for VirtualScrolling.
maxSelectedLabelsnumber3Decides how many selected item labels to show at most.
namestringnullName of the input element.
optionsarraynullAn array of objects to display as the available options.
optionLabelstringlabelName of the label field of an option.
optionValuestringvalueName of the value field of an option.
optionDisabledstringdisabledName of the disabled field of an option.
optionGroupLabelstringlabelName of the label field of an option group.
optionGroupChildrenstringitemsName of the options field of an option group.
groupbooleanfalseWhether to display options as grouped when nested options are provided.
overlayVisiblebooleanfalseSpecifies the visibility of the options panel.
panelStyleobjectnullInline style of the overlay panel.
placeholderstringnullLabel to display when there are no selections.
readonlybooleanfalseWhen present, it specifies that the component cannot be edited.
emptyMessagestringNo records found.Text to display when there is no data. Defaults to global value in i18n translation configuration.
emptyFilterMessagestringNo results foundText to display when filtering does not return any results. Defaults to global value in i18n translation configuration.
resetFilterOnHidebooleanfalseClears the filter value when hiding the dropdown.
scrollHeightstring200pxHeight of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
selectedItemsLabelstringellipsisLabel to display after exceeding max selected labels e.g. (0 items selected), defaults "ellipsis" keyword to indicate a text-overflow.
selectionLimitnumbernullNumber of maximum options that can be selected.
showHeaderbooleantrueWhether to show the header.
showTransitionOptionsstring.12s cubic-bezier(0, 0, 0.2, 1)Transition options of the show animation.
showToggleAllbooleantrueWhether to show the checkbox at header to toggle all items at once.
styleobjectnullInline style of the element.
styleClassstringnullStyle class of the element.
tabindexnumbernullIndex of the element in tabbing order.
tooltipanynullAdvisory information to display in a tooltip on hover.
tooltipStyleClassstringnullStyle class of the tooltip.
tooltipPositionstringtopPosition of the tooltip, valid values are right, left, top and bottom.
tooltipPositionStylestringabsoluteType of CSS position.
virtualScrollbooleanfalseWhether the data should be loaded on demand during scroll.

События

NameParametersDescription
onClickevent: Click eventCallback to invoke when component is clicked.
onChangeevent.originalEvent: browser event<br>event.value: Current selected values<br>event.itemValue: Toggled item valueCallback to invoke when value changes.
onFilterevent.originalEvent: Browser event<br>event.filter: Filter value used in filtering.Callback to invoke when data is filtered.
onFocusevent.originalEvent: browser eventCallback to invoke when multiselect receives focus.
onBlurevent.originalEvent: browser eventCallback to invoke when multiselect loses focus.
onPanelShow-Callback to invoke when overlay panel becomes visible.
onPanelHide-Callback to invoke when overlay panel becomes hidden.

Шаблоны

NameParameters
item$implicit: Data of the item
group$implicit: Data of the group item
selectedItems$implicit: value
header-
empty-
emptyfilter-
footer-

Стилизация

NameElement
p-multiselectContainer element.
p-multiselect-label-containerContainer of the label to display selected items.
p-multiselect-labelLabel to display selected items.
p-multiselect-triggerDropdown button.
p-multiselect-filter-containerContainer of filter input.
p-multiselect-panelOverlay panel for items.
p-multiselect-itemsList container of items.
p-multiselect-itemAn item in the list.
p-multiselect-openContainer element when overlay is visible.