是否可以在Symfony/bootstrap中拥有自动完成文本框？

Question

我正在使用带有Braincrafted Bootstrap捆绑包的Symfony 2.4.我一直在寻找一种在Bootstrap中使用自动填充文本框的方法,但看起来我需要一个外部库来执行此操作("Typeahead"？).

首先,使用Bootstrap本身是否真的无法做到这一点？其次,除了Typeahead之外还有其他推荐的替代方案吗？

谢谢

Answer 1

一个预输入可以与Symfony2的完成尽管它可能需要一些时间.这是一个循序渐进的例子:

实体:

由于Symfony2中的所有(或至少大多数)表单都映射到实体,因此您应该从这里开始.您想要一个预先输入的实体的一个重要部分是__toString方法.在这个例子中,我们有一个Address实体:

class Address
{
    /**
     * @ORM\Column(type="string")
     * @Assert\NotBlank(message="Please enter an address")
     */
    protected $addressstring;

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

表格:

现在我们有了很好的小东西,Address可以将它添加到EventType表单中.在buildForm方法中我们添加了我们的地址字段:

$builder->add(
    $builder->create(
        'address', 
        'text',
        ['attr' => ['class' => 'address_typeahead']]
    )
);

请注意,字段类型是文本而不是实体.这给了我们文本输入的优势,而不是愚蠢的下拉菜单或复选框.我们还添加了一个class属性来快速获取字段javascript.

模板:

让我们创建一个简单的表单模板:

<form action="{{ path('event_add') }}" method="post" {{ form_enctype(form) }}>
    {{ form_widget(form) }}
    <input class="btn btn-primary" type="submit" value="Create Event" />
</form>

并在javascript下面添加一些:

$('.address_typeahead').typeahead({
    source: function (query, process) {
        var addressobj = $(this).parent();
        return $.get('{{ path('events_address_typeahead') }}', { 'addr': query }, function (data) {
            return process(data);
        });
    }
});

那个行动:

我们就快到了.但是typeaheadAction缺少了.让我们将它添加到我们选择的控制器:

/**
 * @Route("/address/typeahead", name="events_address_typeahead")
 * @Method("GET")
 */
public function addressTypeaheadAction(Request $request)
{
    $addresses = // get all addresses e.g. from a repository

    return new JsonResponse(
        array_map(
            function ($val) {
                return (string) $val;
            },
            $addresses
        )
    );
}

Typeahead现在应该已经在表单中为您提供了一些不错的选项.

变压器:

我们在这里需要做的最后一件事是添加一个DataTransformer.有了这个,Symfony2就能够将表单字段的值转换为另一种类型(或者在我们的例子中转换为实体).所以我们快速创建一个AddressTransformer:

class StringToAddressTransformer implements DataTransformerInterface
{   
    /**
     * transforms the Address-Object into a String
     */
    public function transform($addrobj)
    {
        if (!$addrobj) {
            return null;
        }

        return $addrobj->__toString();
    }

    /**
     * Reverts Transformation from String to Address Object
     */
    public function reverseTransform($address)
    {

        if (null === $address) {
            return null;
        }

        // .. do anything to transform the string into an object

        return $addrobj;
    }
}

这个变压器真的为我们带来了魔力!最后一步是将它添加到我们的表单中.buildForm从步骤2 更改您的方法,如下所示:

$builder->add(
    $builder->create(
        'address', 
        'text',
        ['attr' => ['class' => 'address_typeahead']]
    )->addModelTransformer(new StringToAddressTransformer())
);

Aaaaaand你完成了!

• 有关DataTransformer的文档
• 这个例子来自我的旧项目