2

我将 Symfony 2.4 与 Braincrafted Bootstrap 捆绑包一起使用。我一直在寻找一种在 Bootstrap 中具有自动完成文本框的方法，但似乎我需要一个外部库来执行此操作（“Typeahead”？）。

首先，绝对不可能用 Bootstrap 原生地做到这一点吗？其次，除了Typeahead，还有什么推荐的替代品吗？

谢谢

4

1 回答 1

11

虽然可能需要一些时间，但可以使用 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']]
    )
);

请注意，字段类型是text而不是entity。这为我们提供了文本输入的优势，而不是愚蠢的下拉菜单或复选框。我们还添加了一个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;
    }
}

这个变压器真的为我们创造了魔力！最后一步是将其添加到我们的表单中。从步骤 2更改您的buildForm方法，如下所示：

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

啊啊啊，你完成了！

于 2014-04-23T06:33:05.170 回答