Question

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

在我的表格课程中，我有这个：

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

在我的twig文件中：

<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的默认下拉菜单。我做错了什么

Answer 1

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

{{ 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选择器，以使用您已添加到表单构建器中的字段的类。这样您就可以控制要定位的选择字段。

Answer 2

您正在启动没有配置的select2组件，因此它不知道数据源在哪里。

在开始编码之前，您需要安装和配置FOSJsRoutingBundle。该捆绑包将帮助您访问ajax路线

对于完全配置的同步symfony-forms~select2，您可以执行以下操作。

实体人

class Person
{
    /**
     * @var integer
     *
     * @ORM\Column(name="id", type="integer", nullable=false)
     * @ORM\Id
     * @ORM\GeneratedValue(strategy="SEQUENCE")
     * @ORM\SequenceGenerator(sequenceName="person_id_seq", allocationSize=1, initialValue=1)
     */
    private $id;

    /**
     * @var string
     *
     * @ORM\Column(name="name", type="string", nullable=true)
     */
    private $name;

    /**
     * @var Country
     *
     * @ORM\ManyToOne(targetEntity="Country")
     * @ORM\JoinColumns({
     *   @ORM\JoinColumn(name="country_id", referencedColumnName="id")
     * })
     */
    private $country;



    /**
     * Get id
     *
     * @return integer
     */
    public function getId()
    {
        return $this->id;
    }

    /**
     * Set name
     *
     * @param string $name
     *
     * @return Person
     */
    public function setName($name)
    {
        $this->name = $name;

        return $this;
    }

    /**
     * Get name
     *
     * @return string
     */
    public function getName()
    {
        return $this->name;
    }

    /**
     * Set country
     *
     * @param \AppBundle\Entity\Country $country
     *
     * @return Person
     */
    public function setCountry(\AppBundle\Entity\Country $country = null)
    {
        $this->country = $country;

        return $this;
    }

    /**
     * Get country
     *
     * @return \AppBundle\Entity\Country
     */
    public function getCountry()
    {
        return $this->country;
    }

    public function __toString()
    {
        return $this->name;
    }
}

实体国家

class Country
{
    /**
     * @var integer
     *
     * @ORM\Column(name="id", type="integer", nullable=false)
     * @ORM\Id
     * @ORM\GeneratedValue(strategy="SEQUENCE")
     * @ORM\SequenceGenerator(sequenceName="country_id_seq", allocationSize=1, initialValue=1)
     */
    private $id;

    /**
     * @var string
     *
     * @ORM\Column(name="name", type="string", nullable=true)
     */
    private $name;

    /**
     * Get id
     *
     * @return integer
     */
    public function getId()
    {
        return $this->id;
    }

    /**
     * Set name
     *
     * @param string $name
     *
     * @return Country
     */
    public function setName($name)
    {
        $this->name = $name;

        return $this;
    }

    /**
     * Get name
     *
     * @return string
     */
    public function getName()
    {
        return $this->name;
    }

    public function __toString()
    {
        return $this->name;
    }
}

国家/地区存储库

class CountryRepository extends \ Doctrine \ ORM \ EntityRepository {

 public function countriesSelect2($term)
    {
        $qb = $this->createQueryBuilder('c');

        $qb->where(
            $qb->expr()->like($qb->expr()->lower('c.name'), ':term')
        )
            ->setParameter('term', '%' . strtolower($term) . '%');

        return $qb->getQuery()->getArrayResult();
    }
}

国家/地区控制器

检查路由如何向options参数公开并返回JsonResponse。您也可以使用序列化器。

/**
 * Country controller.
 *
 * @Route("countries")
 */
class CountryController extends Controller
{
    /**
     * Lists all person entities.
     *
     * @Route("/", name="countries",options={"expose"=true})
     * @Method("GET")
     */
    public function indexAction(Request $request)
    {
        $countryRepo = $this->getDoctrine()->getRepository('AppBundle:Country');
        $data = $countryRepo->countriesSelect2($request->get('q', ''));

        //$response = $this->get('serializer')->serialize($data,'json');

        return new JsonResponse($data);
    }
}

到目前为止一切顺利，现在是好的部分，让我们去配置我们的表格

PersonType

class PersonType extends AbstractType
{
    /**
     * {@inheritdoc}
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add('name')
            ->add('country',EntityType::class,[
                'class' => Country::class,
                'attr' => [
                  'class' => 'select2', // the class to use with jquery
                    'data-source' => 'countries', //the exposed route name for data-soirce as attr
                    'data-allow-clear' => 'true'//another extra attr to customize
                ],
            ]);
    }/**
     * {@inheritdoc}
     */
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array(
            'data_class' => 'AppBundle\Entity\Person'
        ));
    }

    /**
     * {@inheritdoc}
     */
    public function getBlockPrefix()
    {
        return 'appbundle_person';
    }
}

JS，显示select2

请记住，您已经使用属性配置了select2 options，只需正确使用它们

$(document).ready(function () {
            $('.select2').each(function () {//using the select2 class
                if (!$().select2) {//checking the script
                    return;
                }
                $.fn.select2.defaults.set("theme", "bootstrap");//some theming if you want

                $($(this)).select2({
                    placeholder: "Select",
                    width: 'auto',
                    allowClear: $(this).attr("data-allow-clear") ? $(this).attr("data-allow-clear") : true, //using my options from the form
                    ajax: {
                        url: Routing.generate($(this).attr("data-source")), //here its the magic
                        dataType: 'json',
                        processResults: function (data) {
                            //console.log(data);
                            return {
                                results: $.map(data, function (item) {
                                    return {
                                        text: item.name, //you need to map this because the plugin accepts only id and text
                                        id: item.id
                                    }
                                })
                            };
                        }
                    }
                });
            });
        });

之后，一切都完成了。当我测试自己时，所有代码都正常工作

希望它有所帮助！

Answer 3

有一个很好的捆绑：TetranzBundle

您可以在FormType类中配置表单字段，如下所示：

            ->add('product', Select2EntityType::class, [
                'label'=>'product',
                'required'=>true,
                'mapped'=>true,
                'multiple' => false,
                'remote_route' => 'product_select2_ajax',
                'class' => 'AppBundle:Product',
//                'property' => 'name',
                'minimum_input_length' => 0,
                'page_limit' => 10,
                'allow_clear' => true,
                'delay' => 250,
                'cache' => true,
                'cache_timeout' => 60000, // if 'cache' is true
                'language' => 'pl',
                'placeholder' => "select.product",
            ])

Answer 4

试试这个：

<script type="text/javascript">
    $(document).ready(function() {
    $('.select2').select2(); //instead $('select2').select2();
});
</script>

请参阅如何选择a class in Jquery和basic usage exemple

以Symfony形式启用Select2Search

4 个答案: