如何在EasyAdmin筛选器中使用Tomselect库？

要在EasyAdmin的筛选器中集成TomSelect，需要自定义筛选器类型并确保资源正确加载，以下是具体实现步骤：

1. 创建自定义关联筛选器类 #

继承EasyAdmin默认的AssociationFilter，修改表单字段的属性以启用TomSelect：

// src/Filter/TomselectAssociationFilter.php
namespace App\Filter;

use EasyCorp\Bundle\EasyAdminBundle\Filter\AssociationFilter;
use Symfony\Component\Form\FormBuilderInterface;

class TomselectAssociationFilter extends AssociationFilter
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        parent::buildForm($builder, $options);

        // 给筛选器字段添加TomSelect标识类和配置
        $builder->get($this->getFilterParameterName())
            ->setAttr([
                'class' => 'tomselect',
                'data-tomselect-options' => json_encode([
                    'create' => false,
                    'sortField' => 'text',
                    'placeholder' => '选择关联项',
                    // 可根据需求添加更多TomSelect配置
                ]),
            ]);
    }
}

2. 在CRUD控制器中使用自定义筛选器 #

替换默认的关联筛选器，使用你刚创建的TomselectAssociationFilter：

// src/Controller/Admin/YourEntityCrudController.php
namespace App\Controller\Admin;

use App\Entity\YourEntity;
use App\Filter\TomselectAssociationFilter;
use EasyCorp\Bundle\EasyAdminBundle\Config\Filters;
use EasyCorp\Bundle\EasyAdminBundle\Controller\AbstractCrudController;

class YourEntityCrudController extends AbstractCrudController
{
    public static function getEntityFqcn(): string
    {
        return YourEntity::class;
    }

    public function configureFilters(Filters $filters): Filters
    {
        return $filters
            // 替换为你的关联字段名和显示标签
            ->add(TomselectAssociationFilter::new('relatedEntity', '关联实体'));
    }
}

3. 确保TomSelect资源加载 #

EasyAdmin在表单场景下已经包含TomSelect的CSS和JS，但筛选器区域可能需要手动触发初始化。添加自定义JS脚本完成初始化：

// assets/js/admin/tomselect-filters.js
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.tomselect').forEach(el => {
        if (!el.tomselect) {
            const options = JSON.parse(el.dataset.tomselectOptions || '{}');
            new TomSelect(el, options);
        }
    });
});

然后在Dashboard控制器中注册该脚本（或通过Webpack Encore编译后引入）：

// src/Controller/Admin/DashboardController.php
namespace App\Controller\Admin;

use EasyCorp\Bundle\EasyAdminBundle\Config\Assets;
use EasyCorp\Bundle\EasyAdminBundle\Controller\AbstractDashboardController;

class DashboardController extends AbstractDashboardController
{
    // ...其他方法

    public function configureAssets(): Assets
    {
        return Assets::new()
            // 引入EasyAdmin自带的TomSelect资源（确保依赖加载）
            ->addCssFile('bundles/easyadmin/css/form.css')
            ->addJsFile('bundles/easyadmin/js/form.js')
            // 引入自定义初始化脚本
            ->addJsFile('build/js/admin/tomselect-filters.js');
    }
}

可选：配置远程搜索 #

如果需要Ajax远程搜索关联数据，可修改data-tomselect-options添加Ajax配置：

// 在TomselectAssociationFilter的buildForm方法中
'data-tomselect-options' => json_encode([
    'create' => false,
    'sortField' => 'text',
    'load' => function(query, callback) {
        fetch(`/admin/api/search-related-entities?q=${query}`)
            .then(res => res.json())
            .then(data => callback(data));
    },
]),

同时需要创建对应的API控制器处理搜索请求，返回符合TomSelect格式的数据（包含value和text字段）。

内容的提问来源于stack exchange，提问作者skymeissner