如何在 Prime React 多选中用逗号分隔的字符串过滤数据

Question

如何将过滤结果显示为逗号分隔的字符串，例如如果我搜索“罗马，纽约”，那么这两个项目都将显示在下拉选项列表中。

import { MultiSelect } from 'primereact/multiselect';

export default function FilterDemo() {
    const [selectedCities, setSelectedCities] = useState(null);
    const cities = [
        { name: 'New York', code: 'NY' },
        { name: 'Rome', code: 'RM' },
        { name: 'London', code: 'LDN' },
        { name: 'Istanbul', code: 'IST' },
        { name: 'Paris', code: 'PRS' }
    ];

    return (
        <div className="card flex justify-content-center">
            <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
                filter placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
        </div>
    );
}

Answer 1

要在下拉选项列表中将所选城市显示为逗号分隔的字符串，可以通过自定义 MultiSelect 组件的显示模板来实现。您可以通过以下方式修改代码来实现此目的：

import { MultiSelect } from 'primereact/multiselect';
import { useState } from 'react';

export default function FilterDemo() {
    const [selectedCities, setSelectedCities] = useState(null);
    const cities = [
        { name: 'New York', code: 'NY' },
        { name: 'Rome', code: 'RM' },
        { name: 'London', code: 'LDN' },
        { name: 'Istanbul', code: 'IST' },
        { name: 'Paris', code: 'PRS' }
    ];

    // Custom template for displaying selected items
    const selectedCitiesTemplate = (option) => {
        return option.map(city => city.name).join(', ');
    };

    return (
        <div className="card flex justify-content-center">
            <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
                filter placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem"
                selectedItemsLabel={selectedCitiesTemplate} />
        </div>
    );
}