我有一个城市和选民实体之间的一对多关系。我想将实体字段(下拉列表中的成千上万条记录)转换为文本输入,以便当用户开始输入2个字母时可以实现JQuery自动完成功能。两周后,我成功创建了DataTransformer,它将实体字段转换为文本输入。现在我的问题是我仍在学习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; }
使用此代码,当用户输入的城市名称与数据库中已保存的名称不匹配时,我可以成功创建一个新的选民并抛出验证错误(表单类型中的invalid_message)。我现在缺少的是我想要实现当用户键入至少两个字母时,jQuery自动完成
树枝部分
//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) }}
如您所见,表单本身除了City字段外还由许多字段组成。在这里,City字段是一个下拉列表,由数据库中的一千多个条目组成。我可以使用DataTransformer将这个下拉列表成功转换为文本字段。因此,这里的问题是如何在具有许多字段的此表单内实现JQuery Autocomplete。
任何帮助表示赞赏
更新资料
根据用户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在呈现表单时提供的城市字段的默认ID.JQuery自动完成现在可以正常工作,但是问题是,我无法保存所选的选项,同时触发了我在FormType.php中创建的invalid_message验证以及单击提交按钮时的JQuery脚本
选项:Basista(Pangasinan Province)又名未定义
告诉您所选值的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 ); } });
首先,您必须开始创建返回json数据的路由和操作。jQuery的自动完成远程功能为您提供了带有索引“ term ” 的$ _GET variabele,并希望返回JSON。这是一个使用名称为 City 且属性 为$ name 的实体的示例 __
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自动完成功能的源代码一样制作树枝视图。唯一的区别是 autocomplete() 函数中的 源 变量。在那里,您必须使用路径键(例如 city_autocomplete ) 指定te Twig 的 path() 函数。 __ __ __
(此视图需要其他路线和其他(正常)操作。)
<!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>
最后,您可以稍微更改此视图并使用自己的表单。