Symfony表单：HTML5数据列表

如何使用数据库中的值实现HTML5数据列表（条令）

---

用途：用许多选项替换选择，以自动完成输入。

首先，为字段添加新的

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';
    }
}

你有表格主题吗？如果是，请跳到下一步；如果不是，请在

app/Resources/views/Form/fields.html.twig

中创建一个新的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 %}

您不需要以某种方式从DB加载您的选择，我建议将它们作为最简单的解决方案在表单选项中传递。

在表单类型中：

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

->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>

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

{{form_row（formulaire.commerciaux）}

我花了一些时间试图解决这个问题，有一个非常简单的解决方案解决了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 %}

在您的表单类型中：

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

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

声明（控制器或视图） 'bieres'=>$array\u bieres

在你看来：

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

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

{{form_row（formulaire.commerciaux）}
{bieres%中的biere百分比}
{%endfor%}

应该相对简单。请参阅此链接：此解决方案存在问题：选项值（实体id）！=我想在数据列表中显示的文本。@Yakimun您可以将任何想要显示的文本传递给

选项。Datalist不允许值与用户选择的值不同，它只是为文本输入添加自动完成功能的一种方法。