Question

我使用Symfony 2.4和Braincrafted Bootstrap捆绑包。我一直在寻找一种在Bootstrap中使用自动填充文本框的方法，但看起来我需要一个外部库来执行此操作（＆＃34; Typeahead＆＃34;？）。

首先，使用Bootstrap进行本机操作绝对不可能吗？其次，除了Typeahead之外还有其他推荐的替代方案吗？

由于

Answer 1

typeahead 可以使用Symfony2完成，但可能需要一些时间。这是一个循序渐进示例：

实体：

由于Symfony2中的所有（或至少大多数）表单都映射到实体，因此您应从此处开始。您希望 typeahead 的实体的一个重要部分是__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;
    }
}

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

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

Aaaaaand你完成了！

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

1 个答案:

实体：

表格：

模板：

行动：

变压器：