时间戳

首页 > 解决方案 > 在 Symfony 表单中启用 Select2Search

forms - 在 Symfony 表单中启用 Select2Search

问题描述

我想在我的 Symfony 表单中启用选择 2 搜索，我到目前为止尝试过：

在我的表单类中，我有这个：

->add('parent', EntityType::class, [
                'class' => Category::class,
                'choice_label' => 'title',
                'attr' => [
                    'class' => 'select2'
                ]
            ])

在我的树枝文件中：

<head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
    <!-- Loading jquery here--><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
</head>

    {{ form_start(form) }}
    <script type="text/javascript">
        $('select').select2();
    </script>
    {{ form_widget(form) }}
    {{ form_end(form) }}

但我没有得到搜索栏的下拉菜单。只是 Symfony 的默认下拉菜单。我究竟做错了什么

标签： formssymfonyjquery-select2

解决方案

主要原因是该字段是在您尝试定位它之后创建的，通过以下行：

{{ form_widget(form) }}

之后必须执行 JavaScript 才能定位该字段（此外，您的模板的 HTML 结构是错误的）。

尝试这个 ：

<!DOCTYPE html>
<html>
<head>
    <title>Test form</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
    <!-- Loading jquery here--><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
</head>
<body>
    {{ form_start(form) }}
    {{ form_widget(form) }}
    {{ form_end(form) }}

    <script>
        $('select').select2();
    </script>
</body>
</html>

通常最好在执行脚本之前等待页面加载，使用 jQuery 您可以通过将脚本更改为以下内容来确保是这种情况：

<script>
    $(document).ready(function(){
        $('.select2').select2();
    });
</script>

请注意，我还更改了 jQuery 选择器以使用您添加到表单构建器中的字段的类。这样您就可以控制要定位的选择字段。

推荐阅读