README

此扩展包为您的 symfony 表单提供基于 Twitter Typeahead 的类型提示表单输入，基于 Mathieu Muller 的版本，只是省略了 jQuery 依赖。

安装

使用 composer，在您的 composer.json 文件中添加以下行

{
    "require": {
        "slim/typeaheadbundle": "dev-master"
    }
}

别忘了在您的 kernel 中启用它

// app/AppKernel.php
public function registerBundles()
{
    $bundles = array(
        //...
        new MatM\Bundle\TypeAheadBundle\MatMTypeAheadBundle(),
        //...

配置

在您的 config.yml 文件中仅添加以下行

# app/config/config.yml
twig:
    form:
        resources:
            - 'MatMTypeAheadBundle:Form:typeahead-form-theme.html.twig'
...
framework:
    templating:
        packages:
        cdnjs:
            base_urls:
                http: ['https://cdnjs.cloudflare.com/ajax/libs/']

要包含的文件

在您的 base.html.twig 文件（或等效文件）中，只需包含默认样式表（或者您也可以创建自己的样式表）

{% stylesheets 'bundles/matmtypeahead/css/typeahead.css' %}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}

typeahead 扩展包的 JS 文件

<script src="{{ asset('typeahead.js/0.11.1/typeahead.bundle.js', 'cdnjs') }}"></script>
{% javascripts "@MatMTypeAheadBundle/Resources/public/js/TypeAhead/TypeAheadBundle.js" %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

使用方法

在您的控制器动作请求中，按需请求实体存储库，然后调用类型提示数据集生成器，并用您的结果选择您想要用于搜索和显示的实体属性

// $results = the results of your own query
// "search_method" = the method of your target entity you want to use for the search
// "display_method" = the method of your target entity you want to use for the display
$list = $this->get("matm.dataset_maker")->makeTypeAheadDataset($results, "search_method", "display_method");

然后将列表传递到您的模板中

return $this->render(
    'MyBundle:MyController:my_template.html.twig',
    array(
        'form' => $form->createView(),
        'list' => $list
    )
);

最后，在您的模板中创建一个包含它的 JS 变量

{% block javascripts %}
    <script>
         var list = {{ list | json_encode | raw }};
    </script>
{% endblock %}

在 JS 文件中声明一个 document ready

//list : your data list
//dataset_name : choose a name for your dataset
//#my_form_input_id : the id of the form input
// onSelectFunction : not mandatory->the function you wish to execute on value selection
$(document).ready(function(){
    TypeAheadBundle.typeAheadProcessor(list, "#my_form_input_id", onSelectFunction);
});

现在，您只需要在表单构建类中调用类型提示输入

$builder->add(
    'myProperty',
    'typeahead',
    array(
        "data_class" => 'Path\ToMy\Bundle\Entity\MyEntity',
        'label'    => 'my_label',
        'attr' => array("display" => "name"), //the property to display in case of hydrated form
    )
)

即使您没有在 symfony 表单中使用它，您也可以使用小部件，只需在 twig 模板中包含它即可

{% include "MatMTypeAheadBundle::matm_typeahead.html.twig" with {id: "choose_an_id", placeholder: 'choose_a_placeholder')} %}

就这样！