Symfony Forms：HTML5 datalist

Question

如何使用數據庫（Doctrine）中的值實現HTML5數據列表？

目的：用自動完成替換具有多種選項的輸入。

Answer 1

首先，爲該字段添加新的FormType :.

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

use Symfony\Component\Form\AbstractType; 
use Symfony\Component\Form\FormInterface; 
use Symfony\Component\Form\FormView; 
use Symfony\Component\OptionsResolver\OptionsResolverInterface; 

class DatalistType extends AbstractType 
{ 
    public function getParent() 
    { 
     return 'text'; 
    } 

    public function setDefaultOptions(OptionsResolverInterface $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創建一個新的和更改默認的樹枝主題是：

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

現在形式的主題定義模板爲您的新領域：

{% block datalist_widget %} 
     <input list="{{ id }}" {{ block('widget_attributes') }}> 
     <datalist id="{{ id }}"> 
      {% for choice in choices %} 
       <option value="{{ choice }}"></option> 
      {% endfor %} 
     </datalist> 
{% endblock %} 

使用你的領域中FormType：

​​

而不是['a', 'b']你需要以某種方式從數據庫加載你的選擇，我建議將它們在形式上OPTI作爲最簡單的解決方案。

Answer 2

在你formType：

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

Answer 3

我花了一些時間，試圖解決這個問題，並沒有解決了康斯坦丁的問題與數據庫訪問的一個很簡單的解決方案。它是創建一個具有EntityType的新表單類型，因爲它是父類型。

class DatalistType extends AbstractType 
{ 
    public function getParent() { 
     return EntityType::class; 
    } 
} 

然後，您可以創建這個widget一個新的模板：

{# 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'))