README

这是一个提供自动完成表单类型的 Symfony 组件。它为 Symfony v4+ 设计。目前，该组件使用 Select2 作为其基础。将来我可能会添加其他使用不同接口的 '自动完成' 组件。

这是对我早期的 Typeahead 组件的替代品，该组件最初是为 Symfony v2 设计的，已经多年未更新（但对我很有帮助！）。这不是一对一的替代品，而是一种更现代的方法。

我仍在开发功能并解决一些小问题。 我还没有标记任何版本。

功能

支持使用单个类类型进行实体和非实体查找。
支持 AJAX 或数组列表。
轻松将 JavaScript 代码添加到现有的打包器 (webpack, 等)，或通过 <script> 标签直接使用。
支持不同的主题，如 bootstrap。
支持 tagging - 添加新实体或项的能力。
为 Select 和 Vue-Multiselect 组件提供表单类型。Vue-Multiselect 类型尚未文档化。

要求

此组件需要 Select2 或 Vue-multiselect JavaScript 和 CSS 代码，但不会直接提供。您必须自己包含它，例如：yarn add select2，并将其添加到 webpack 或其他打包器配置中。
Select2 需要 jQuery，并且实际上此组件中不提供。您必须自己提供它，例如：yarn add jquery

示例

注意：以下示例使用 NPM 包 select2-bootstrap-theme 的 bootstrap 主题（yarn add select2-bootstrap-theme）。

一个简单的选择框，允许从 AJAX 请求中选择单个实体 User。

use Lifo\AutocompleteBundle\Form\Type\Select2Type;

$builder->add('user', Select2Type::class, [
    'route'            => 'users_lookup',
    //'url'              => '/absolute/url/instead/of/route',
    'min_input_length' => 1,
    'placeholder'      => 'Search for user ...',
]);

一个简单的选择框，允许从 AJAX 请求中选择多个 User 实体。

$builder->add('users', Select2Type::class, [
    'route'            => 'users_lookup',
    'min_input_length' => 1,
    'multiple'         => true,
    'placeholder'      => 'Search for user ...',
]);

一个简单的选择框，使用纯数组选择。

$builder->add('status', Select2Type::class, [
    'help_block' => 'Inactive users cannot login.',
    'choices'    => [
        'Active'   => 1,
        'Inactive' => 0,
    ],
]);

配置

有很多选项可以自定义自动完成组件的功能方式。以下显示默认值。注意：必须指定 route、url 或 choices 以使组件功能正常。

安装

Symfony v4+, v5+, v6+

composer require lifo/autocomplete-bundle

如果您使用 Flex，则组件无需任何其他配置即可正常工作。

如果您不使用 Flex，则需要将组件注册到 bundles.php 中。

// config/bundles.php
return [
    // ...
    Lifo\AutocompleteBundle\LifoAutocompleteBundle::class => ['all' => true],
    // ...
];

Twig 配置

默认情况下，表单主题在 Twig 中自动启用，但您可以使用以下配置禁用它，如果需要的话。

lifo_autocomplete:
  autoconfigure: false

如果禁用了 autoconfigure，则必须手动更新您的 Twig 配置。

    # config/packages/twig.yaml
    form_themes:
        - '@LifoAutocomplete/autocomplete.html.twig'

Symfony v3.x

Symfony v3 不受官方支持，但可能可以通过手动在 app/AppKernel.php 中注册组件而正常工作。

$bundles = array(
  // ...
  new Lifo\AutocompleteBundle\LifoAutocompleteBundle(),
);

Webpack

这是一个如何将javascript和CSS添加到您的应用的示例。这里的原理与其他打包器类似。

在您的主入口点，您可以添加类似以下的内容

// assets/app.js
import 'bootstrap'
import 'select2'
require('select2/dist/css/select2.min.css');
// ...

脚本标签

您也可以使用直接脚本标签来包含所需的javascript。以下路径假设文件已存在于您的public网页目录中。

<script src="js/select2/dist/js/select2.js"></script>

<link href="css/select2.min.css" type="text/css" rel="stylesheet" />

数据格式

AJAX响应和简单的数组列表需要以下格式

[ 
  'results' => [ 
    [
      'id'   => 'unique ID',
      'text' => 'text displayed',
    ],
    [
      'id'   => 'unique ID',
      'text' => 'text displayed',
    ],
  ],
  'more' => true|false,
  // or:
  // 'pagination' => [
  //   'more' => true|false
  // ]

AJAX请求

Select2在AJAX请求中发送以下内容。

term - 搜索框中的当前搜索词。
q - 包含与term相同的内容。
_type - "请求类型"。通常为查询，但在分页请求时变为query_append。
page - 要请求的当前页码。仅用于分页（无限滚动）搜索。

lifo / autocomplete-bundle

维护者

详细信息