Symfony/bootstrap 中是否可以有一个自动完成文本框？ [已关闭]

Question

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

首先，用 Bootstrap 本地肯定不可能做到这一点吗？ 其次，除了 Typeahead 之外，还有其他推荐的替代方案吗？

谢谢

Answer 1

A 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']]
    )
);

请注意，字段类型是 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())
);

啊啊啊你就完成了！

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