在 Symfony2 实体字段中添加 JQuery 自动完成

Question

我有一个一对多的城市和选民实体 relationships.I 想将实体字段（下拉列表中的数千条记录）转换为文本输入，以便我可以实现 JQuery 当用户开始输入时自动完成 2 letters.After 将近两周，我成功创建了将实体字段转换为文本的 DataTransformer input.Now 我的问题是我仍在学习 JQuery/Ajax 我是对如何在 Symfony2 表单中实现它感到困惑。

//formtype.php


private $entityManager;

public function __construct(ObjectManager $entityManager)
{
  $this->entityManager = $entityManager;
}
$builder
        ->add('address', null, array(
        'error_bubbling' => true
      ))
        ->add('city', 'text', array(
        'label' => 'Type your city',
        //'error_bubbling' => true,
        'invalid_message' => 'That city you entered is not listed',
      ))
 $builder->get('city')
      ->addModelTransformer(new CityAutocompleteTransformer($this->entityManager));

//datatransformer.php

class CityAutocompleteTransformer implements DataTransformerInterface
{
private $entityManager;

public function __construct(ObjectManager $entityManager)
{
    $this->entityManager = $entityManager;
}

public function transform($city)
{
    if (null === $city) {
        return '';
    }

    return $city->getName();
}

public function reverseTransform($cityName)
{
    if (!$cityName) {
        return;
    }

    $city = $this->entityManager
        ->getRepository('DuterteBundle:City')->findOneBy(array('name' => $cityName));

    if (null === $city) {
        throw new TransformationFailedException(sprintf('There is no "%s" exists',
            $cityName
        ));
    }

    return $city;
 }
}

//controller.php

public function createAction(Request $request)
{
    $entity = new Voters();
    $form = $this->createCreateForm($entity);
    $form->handleRequest($request);

    $validator = $this->get('validator');
    $errors = $validator->validate($entity);
    if ($form->isValid()) {
        $em = $this->getDoctrine()->getManager();
        $em->persist($entity);
        $em->flush();


        $this->addFlash('danger', 'You are successfully added!, Welcome to the growing Supporters, dont forget to share and invite this to your friends and relatives, click share buttons below, have a magical day!');

        //return $this->redirect($this->generateUrl('voters_show', array('id' => $entity->getId())));
        return $this->redirect($this->generateUrl('voters_list'));
    } else {

        $this->addFlash('danger', 'Oppss somethings went wrong, check errors buddy!');

        return $this->render('DuterteBundle:Voters:neww.html.twig', array(
            'entity' => $entity,
            'form'   => $form->createView(),
        ));
    }
}

/**
 * Creates a form to create a Voters entity.
 *
 * @param Voters $entity The entity
 *
 * @return \Symfony\Component\Form\Form The form
 */
private function createCreateForm(Voters $entity)
{   
    $entityManager = $this->getDoctrine()->getManager();
    $form = $this->createForm(new VotersType($entityManager), $entity, //here i passed the entity manager to make it work
array(
        'action' => $this->generateUrl('voters_create'),
        'method' => 'POST',
    ));

    $form->add('submit', 'submit', array(
        'label' => 'I Will Vote Mayor Duterte'
    ));

    return $form;
}

使用此代码，我可以成功创建一个新选民，并且当用户输入的城市名称与已保存在 [=51= 中的城市名称不匹配时，将抛出验证错误（invalid_message ] 我现在缺少的是我想在用户输入至少两个字母时实现 JQuery 自动完成

Twig 部分

//twig.php

  {{ form_start(form, {attr: {novalidate: 'novalidate'}} ) }}
        {{ form_errors(form) }}
        {{ form_row(form.comments,{'attr': {'placeholder': 'Why You Want '}}) }}
        {{ form_row(form.email,{'attr': {'placeholder': 'Email is optional, you may leave it blank.But if you want to include your email, make sure it is your valid email '}}) }}
        {{ form_end(form) }}

如您所见，表单本身由许多字段组成，除了城市 field.Here 之外，城市字段是一个下拉列表，其中包含来自 database.I 的一千多个条目可以成功使用 DataTransformer.So 将此下拉列表转换为文本字段这里的问题是如何在具有许多字段的此表单中实现 JQuery 自动完成。

感谢任何帮助

更新

根据用户 Frankbeen 的回答，我在我的控制器中添加了一个动作

public function autocompleteAction(Request $request)
{
    $names = array();
    $term = trim(strip_tags($request->get('term')));

    $em = $this->getDoctrine()->getManager();

    $entities = $em->getRepository('DuterteBundle:City')->createQueryBuilder('c')
       ->where('c.name LIKE :name')
       ->setParameter('name', '%'.$term.'%')
       ->getQuery()
       ->getResult();

    foreach ($entities as $entity)
    {
        $names[] = $entity->getName()."({$entity->getProvince()})";
    }

    $response = new JsonResponse();
    $response->setData($names);

    return $response;
}

还有js文件

{% block javascripts %}
{{ parent() }}
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
    $(function() {
        function log( message ) {
            $( "<div>" ).text( message ).prependTo( "#log" );
            $( "#log" ).scrollTop( 0 );
        }

        $( "#project_bundle_dutertebundle_voters_city").autocomplete({
            source: "{{ path('city_autocomplete') }}",
            minLength: 2,
            select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.value + " aka " + ui.item.id :
                "Nothing selected, input was " + this.value );
            }
        });
    });
</script>
{% endblock %}

在这种情况下，

  $( "#project_bundle_dutertebundle_voters_city").autocomplete({

部分实际上是 Symfony2 在呈现 form.The JQuery 自动完成时提供的城市字段的默认 ID，但问题是，我无法保存所选选项， invalid_message 我在 FormType.php 中创建的验证以及 JQuery 脚本在单击提交按钮时被触发

Selected: Basista (Pangasinan Province) aka undefined

表示所选值的 Id 未定义

$( "#project_bundle_dutertebundle_voters_city").autocomplete({
            source: "{{ path('city_autocomplete') }}",
            minLength: 2,
            select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.value + " aka " + ui.item.id ://this throw undefined
                "Nothing selected, input was " + this.value );
            }
        });

Answer 1

首先，您必须开始创建包含 returns json 数据的路线和操作。 JQuery's autocomplete remote 给你一个带有索引 'term' 的 $_GET 变量并且想要接收 JSON 回来。这是一个使用名称为 City 和属性 $ 的实体的示例名字

namespace AppBundle\Controller;

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\JsonResponse;

/**
 * City controller.
 *
 * @Route("/city")
 */
class CityController extends Controller
{
    /**
     * @Route("/autocomplete", name="city_autocomplete")
     */
    public function autocompleteAction(Request $request)
    {
        $names = array();
        $term = trim(strip_tags($request->get('term')));

        $em = $this->getDoctrine()->getManager();

        $entities = $em->getRepository('AppBundle:City')->createQueryBuilder('c')
           ->where('c.name LIKE :name')
           ->setParameter('name', '%'.$term.'%')
           ->getQuery()
           ->getResult();

        foreach ($entities as $entity)
        {
            $names[] = $entity->getName();
        }

        $response = new JsonResponse();
        $response->setData($names);

        return $response;
    }
}

其次，您可以制作一个树枝视图，就像 jQuery 自动完成的来源一样。唯一的区别是 source 变量 autocomplete() 功能。在那里你必须用你的路由键指定 te twig 的 path() 函数，例如 city_autocomplete。

（此视图需要另一条路线和另一条（正常）操作。）

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Remote datasource</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .ui-autocomplete-loading {
    background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
  }
  </style>
  <script>
  $(function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

    $( "#birds" ).autocomplete({
      source: "{{ path('city_autocomplete') }}",
      minLength: 2,
      select: function( event, ui ) {
        log( ui.item ?
          "Selected: " + ui.item.value + " aka " + ui.item.id :
          "Nothing selected, input was " + this.value );
      }
    });
  });
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="birds">Birds: </label>
  <input id="birds">
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>


</body>
</html>

最后您可以稍微更改此视图并使用您自己的表单。

Answer 2

最后，在深入挖掘我的 Symfony 代码后，我终于找到了 solution.Using 用户 Frankbeen 提供的代码，我添加了一些 'tweak' 顺序 JQuery 到最后work.The 罪魁祸首在控制器中。

$names[] = $entity->getName()."({$entity->getProvince()})";

城市实体与省实体一对多相关relationship.Since城市实体有数千个名称（记录）可能有些值具有相同的名称，因此附加相关省份有助于避免混淆在用户中

San Francisco(Russia Province), San Francisco(Chinese Province),San Francisco(Portugal Province)

现在，由于名称现在 'different' 中的名称已经保存在数据库中，invalid_message 验证将触发 errors.My 解决方案是 'clean' 提交的数据在将用户提交的值与数据库中的值进行比较之前删除附加的省份。在 DataTransformer 中，我添加了一些代码

public function reverseTransform($cityNameConcat)
{
    $cityName = preg_replace("/\([^)]+\)/", "", $cityNameConcat);
    if (!$cityName) {
        return;
    }

    $city = $this->entityManager
        ->getRepository('DuterteBundle:City')->findOneBy(array('name' => $cityName));

    if (null === $city) {
        throw new TransformationFailedException(sprintf('There is no "%s" exists',
            $cityName
        ));
    }

    return $city;
}

现在 JQuery 终于可以工作了，保存到数据库也是 successful.And 最后，

$( "#project_bundle_dutertebundle_voters_city").autocomplete({
        source: "{{ path('city_autocomplete') }}",
        minLength: 2,
        select: function( event, ui ) {
        log( ui.item ?
            "Selected: " + ui.item.value + " aka " + ui.item.id ://this throw undefined
            "Nothing selected, input was " + this.value );
        }
    });

改为

<script>
    $(function() {
        function log( message ) {
            $( "<div>" ).text( message ).prependTo( "#log" );
            $( "#log" ).scrollTop( 0 );
        }

        $( "#project_bundle_dutertebundle_voters_city").autocomplete({
            source: "{{ path('city_autocomplete') }}",
            minLength: 2,
            select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.value + " aka " + ui.item.label:
                "Nothing selected, input was " + this.value );
                $("#project_bundle_dutertebundle_voters_city").val(ui.item.label);
                $("#project_bundle_dutertebundle_voters_city").val(ui.item.value);
                return false;
            },
            change: function( event, ui ) {
                $( "#project_bundle_dutertebundle_voters_city" ).val( ui.item? ui.item.value : 0 );
} 
        });
    });
</script>

现在 'Undefined' 错误消失了。

Answer 3

这里有一个解决方案，可以添加一个关于 Symfony 控制器给出的响应的字段。成功后，通过返回一个对象来添加你想要的字段。然后，在select中，您可以通过ui.item.fields

访问它

$('#mySelector').autocomplete({

        source : function(requete, reponse) {

            lettre = {
                lettre: $('#lettre').val()
            };

            $.ajax({
                url: Routing.generate('chargementSource'),
                dataType: 'json',
                data : lettre,
                success: function (donnee) {
                    
                    reponse(
                            $.map(donnee, function (objet) {
                                return { 
                                  value: '' + objet.nom + ' ' + objet.prenom +', '+ objet.adresse +' '+ objet.codepostal +', '+ objet.ville + '', 
                                 id: objet.id 
                               }
                            })
                    );

                }

            });
        },
        select: function (event, ui) {

            $('#myId').val(ui.item.id);
            //alert(ui.item.id);
            //$('#myId').val(ui.elem.value);

            return false;

        }

    });

在 Symfony2 实体字段中添加 JQuery 自动完成

Adding JQuery Autocomplete in Symfony2 Entity field

ajax

jquery

symfony

twig