Symfony 表单：HTML5 数据列表

Posted 2023-02-16

【中文标题】Symfony 表单：HTML5 数据列表

【英文标题】：Symfony Forms: HTML5 datalist

【发布时间】：2015-09-30 01:58:04

【问题描述】：

如何使用来自数据库（Doctrine）的值实现 html5 数据列表？

目的：将选择替换为具有自动完成功能的输入的许多选项。

【问题讨论】：

应该比较简单。见此链接：symfony.com/doc/current/cookbook/form/form_customization.html

【参考方案1】：

首先，为该字段添加新的FormType：。

<?php
// src/Acme/Form/Type/DatalistType
namespace Acme\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormInterface;
use Symfony\Component\Form\FormView;
use Symfony\Component\OptionsResolver\OptionsResolver;

class DatalistType extends AbstractType

    public function getParent()
    
        return TextType::class;
    

    public function configureOptions(OptionsResolver $resolver)
    
        $resolver->setRequired(['choices']);
    

    public function buildView(FormView $view, FormInterface $form, array $options)
    
        $view->vars['choices'] = $options['choices'];
    

    public function getName()
    
        return 'datalist';
    

在services.yml:

form.type.datalist_type:
    class: Acme\Form\Type\DatalistType
    tags:
        -   name: form.type, alias: datalist 

你有表单主题吗？如果是，请跳到下一步，如果不是，请在app/Resources/views/Form/fields.html.twig 中创建一个新主题并将您的默认 Twig 主题更改为它：

# app/config/config.yml
twig:
    form_themes:
        - ':Form:fields.html.twig'

现在为表单主题中的新字段定义一个模板：

% block datalist_widget %
    <input list=" id _list"  block('widget_attributes') % if value is not empty %value=" value "% endif %>
    <datalist id=" id _list">
        % for choice in choices %
            <option value=" choice "></option>
        % endfor %
    </datalist>
% endblock %

在FormType中使用您的字段：

public function buildForm(FormBuilderInterface $builder, array $options)

    $builder->add('country', DatalistType::class, ['choices' => ['a', 'b']]); 

您需要以某种方式从 DB 加载您的选择，而不是 ['a', 'b']，我建议将它们作为最简单的解决方案传递到表单选项中。

【讨论】：

这个解决方案有问题：选项值（实体 id`s）！= 我想在数据列表中显示的文本。

@Yakimun 您将要显示的任何文本传递给choices 选项。 Datalist 不允许值与用户选择的值不同，它只是为文本输入添加自动完成的一种方式。

【参考方案2】：

在您的表单类型中：

->add('commerciaux', TextType::class,
            [
                'label'     => 'Apporteur d\'affaire*',
                'attr'      =>
                    [
                        'placeholder'   => 'Apporteur d\'affaire',
                        'list'          => 'bieres'           
                    ]
            ]
        )

声明（控制器或视图） 'bieres' => $array_bieres

在你看来：

                     form_row(formulaire.commerciaux) 
                    <datalist id="bieres">
                       % for biere in bieres %
                        <option value=" biere ">
                % endfor %
                    </datalist>

【参考方案3】：

我花了一些时间试图解决这个问题，并且有一个非常简单的解决方案可以解决 Konstantin 的数据库访问问题。它是创建一个新的表单类型，它的父级为 EntityType。

class DatalistType extends AbstractType

    public function getParent() 
        return EntityType::class;
    

然后您可以为此小部件创建一个新模板：

# views/form/fields.html.twig #
% block datalist_widget %
    <input  block('widget_attributes')  list=" form.vars.id _list" value=" form.vars.value " />
    <datalist id=" form.vars.id _list">
        % for choice in choices %
            <option>
                 choice.label 
            </option>
        % endfor %
    </datalist>
% endblock %

最后，在您正在构建的表单的 buildForm 函数中，您可以使用 DatalistType 和 EntityType 选项添加表单元素。

$builder->add('fieldName', DatalistType::class ,
        array('required' => false, 
              'label' => 'fieldLabel', 
              'class' => 'AppBundle\Entity\EntityName',
              'choice_label' => 'entityField'))

【参考方案4】：

在您的表单类型中：

->add('commerciaux', TextType::class,
            [
                'label'     => 'Apporteur d\'affaire*',
                'attr'      =>
                    [
                        'placeholder'   => 'Apporteur d\'affaire',
                        'list'          => 'bieres'           
                    ]
            ]
        )

在你看来：

                     form_row(formulaire.commerciaux) 
                    <datalist id="bieres">
                        <option value="Meteor">
                        <option value="Pils">
                        <option value="Kronenbourg">
                        <option value="Grimbergen">
                    </datalist>