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

2023-12-23

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

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

Thanks


A 预先输入可以使用 Symfony2 完成,尽管可能需要一些时间。这里有一个一步步例子:

实体:

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

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

$('.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
        )
    );
}

提前输入现在应该已经在表单中为您提供了一些不错的选项。

变压器:

我们需要在这里做的最后一件事是添加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())
);

啊啊啊,你就完成了!

  • 关于 DataTransformer 的文档 http://symfony.com/doc/current/cookbook/form/data_transformers.html
  • 这个例子来自我的旧项目 https://bitbucket.org/ferdynator/siyabonga/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Symfony/bootstrap 中是否可以有一个自动完成文本框? [关闭] 的相关文章

  • 在 Bootstrap 模式窗口中打开远程内容

    我所需要的只是一个简单的示例 说明如何将远程内容打开到 Twitter Bootstrap 模式窗口中 我正在使用 Bootstrap v2 0 4 但我无法让它工作 我可以打开常规模式窗口 但无法让它打开其中的远程文件 首先 远程数据必须
  • 在调整窗口大小之前,ChartJS 不会在引导选项卡内绘制图表

    我正在使用 Bootstrap 的选项卡 每个选项卡内都带有 ChartJS 图表 但出现的一个问题是图表画布wont被绘制 直到我调整浏览器窗口的大小 最新的 Chrome 和 Firefox 都发生了这种情况 我一直在尝试不同的解决方案
  • ASP.NET MVC,Bootstrap Tables,获取每列的值

    在 ASP NET MVC 中 我有一个操作 它接受有关行和列的用户输入 然后导航到根据用户输入生成所需行数和列数的操作 如下所示 Views div class container style width 1px div class ro
  • 如何使用 symfony / gauferette / VichUploaderBundle 将文件上传到 Google Cloud Storage

    早上好 我正在上传我的文件locally通过VichUploaderBundle 每件事都很完美 现在我不想再在本地存储我的文件 我想将它们存储在谷歌云存储 我找到KnpGaufrette捆绑包可用于在云中存储文件 那么 有没有关于如何配置
  • 检查 Bootstrap Datepicker 脚本是否已加载

    我收到错误 Uncaught TypeError undefined is not a function 当我尝试设置日期选择器时 datepicker datepicker 如何确定日期选择器是否已加载 需要明确的是 我没有使用 jQue
  • 使用自定义服务的编译器传递加载 Symfony 的参数

    根据这个问题如何从数据库加载 Symfony 的配置参数 Doctrine https stackoverflow com q 28713495 8945214我有一个类似的问题 我需要动态设置参数 并且我想提供来自另一个自定义服务的数据
  • Symfony2 功能测试会话持久性

    我正在尝试在 Symfony 中进行一些功能测试 但目前我的会话遇到了问题 我执行了一段代码 它似乎有效 但容器的会话中没有存储任何内容 我有一个表格 您可以在其中设置数据 当您提交它时 它会检查值并将其存储在会话中 然后它重定向到另一个页
  • 导航栏折叠在 Bootstrap 中不起作用

    Bhanu pratap 解决了这个问题 在这个问题的末尾检查一下 我一直在遵循旧的路线来构建导航栏折叠 三明治 问题是课程中的页面顶部似乎有一个黑条 并且缩小页面时会出现导航栏 对我来说 我只需在左侧找到一个按钮 另外 当我缩小页面时 我
  • 在 Symfony 序列化中更改序列化属性名称

    我正在使用 Symfony 序列化器 效果很好 use Symfony Component Serializer Annotation Groups Groups default notification public function g
  • 使用 Twitter Bootstrap 解除警报不起作用?

    我正在使用谷歌浏览器 Using 推特引导程序 http twitter github com bootstrap 我想添加一个简单的警报 不幸的是alert http twitter github com bootstrap compon
  • Bootstrap 折叠导航菜单

    我正在尝试使用 Bootstrap 折叠插件 但收效甚微 我想要一个带有隐藏子菜单的手风琴式导航菜单 我的 HTML 和 JS ul class nav nav list li class nav header span Home span
  • 为 Angular2 中的组件加载多个样式表

    我正在构建一个 angular2 应用程序 当我尝试为同一组件加载多个样式表时 我面临多个问题 这是我正在做的代码 import Component from angular core Component selector my tag t
  • 使用 Symfony 4 命令加载不同的 .env 文件

    env运行 Symfony 4 命令时会解析文件 如果 dotenv 可用 这在开发时工作正常 而且 我想测试我的代码 所以另一个环境 因此我需要加载另一个 env file 我喜欢 Docker 运行容器的方式 docker run e
  • 无法打开输入文件应用程序/控制台

    我安装了 wamp 服务器和 Symfony2 框架的副本 我正在尝试使用以下命令创建一个捆绑包 php app console generate bundle nampespace IDP IDP Bundle format yml 我的
  • 如何在 Bootstrap 列中使用文本溢出?

    假设我有一行具有固定高度 并且我在其列中插入了一些文本 如果太长 我希望将其剪掉 并在行尾添加三个点 如下所示 我在用着文本溢出 省略号 我的行中有此属性 但无法使其工作 JsFiddle http jsfiddle net Alexnot
  • 字形和 bootstrap 4

    我正在尝试使用 glyphicon 中的 glyphicon 当您单击一个 glyphicon 时 它会提示您所需要做的就是添加 span class span 你想要字形的地方 但在下载它们后 我注意到它们都保存为 png 文件 有谁知道
  • 为什么 `input type="date"` 的行为发生了变化?

    日期输入 例如
  • 在 symfony2 中加载应用程序的自定义配置文件

    我正在开发一个symfony2应用程序 我试图包含我的自定义 yaml 配置位于 src AppBundle Resources Config general yml 我已按照此处提供的示例进行操作http symfony com doc
  • 如何使用变量处理树枝文件中的翻译?

    我有一个 twig 文件和一个 yml 在其中定义翻译变量 e g YML 文件 variable for translation Disponible para t Twig 文件的内容 h2 Hola Follow variableNa
  • Doctrine EntityManager 清除嵌套实体中的方法

    我想用学说批量插入处理 http doctrine orm readthedocs org en latest reference batch processing html为了优化大量实体的插入 问题出在 Clear 方法上 它表示此方法

随机推荐