//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; }
使用此代码,我可以成功创建一个新选民,并在用户输入的城市名称与数据库中已保存的城市名称不匹配时抛出验证错误(form_type中的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) }}
正如您所看到的,表单本身除了城市字段外还包含许多字段.在这里,城市字段是一个下拉列表,包含来自数据库的一千多个条目.我可以使用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({
part实际上是Symfony2在渲染表单时提供的城市字段的默认id.现在JQuery自动完成工作正常,但问题是,我无法保存所选的选项,我在FormType.PHP中创建的invalid_message验证以及单击“提交”按钮时的JQuery脚本
Selected: Basista (Pangasinan Province) aka undefined
这表明所选值的Id未定义
$( "#project_bundle_dutertebundle_Voters_city").autocomplete({ source: "{{ path('city_autocomplete') }}",ui ) { log( ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id ://this throw undefined "nothing selected,input was " + this.value ); } });
解决方法
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; } }
您可以在辅助视图中创建一个twig视图,就像来自jQuery自动完成的源代码一样.唯一的区别是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') }}",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>
最后,您可以稍微更改此视图并使用您自己的表单.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。