我有一个城市和选民实体之间的一对多关系。我想将实体字段(下拉列表中的成千上万条记录)转换为文本输入,以便当用户开始输入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>
最后,您可以稍微更改此视图并使用自己的表单。
本文向大家介绍jQuery实现用户输入自动完成功能,包括了jQuery实现用户输入自动完成功能的使用技巧和注意事项,需要的朋友参考一下 利用jQuery UI中Auto-complete插件实现输入自动完成功能,大家在使用诸如淘宝、京东等电商平台搜索商品时,往往只要输入商品的一些特殊字符,就可以显示出和该字符相近的列表菜单,用户使用鼠标或者键盘方向键就可以快速选择,实现了很好的用户体验。 1.最简
我在Adobe Acrobat Pro中制作了包含Radiobutton,文本字段,按钮,复选框和条形码的PDF格式。一切正常。 但根据新的要求,我必须“自动生成”一些字段,如Radiobutton,Text Field和CheckBox,点击“添加字段”按钮,点击该按钮,控件应该自动生成到PDF表单。 附加的,已经添加到PDF表单中的文本,只要字段在表单顶部自动生成,就会向下流动。 根据我的发现
我想在表单中使用jQuery.AutoComplete.js插件进行输入。我想在客户端进行搜索,不能使用Ajax。但我不想在数组中使用一些简单的基于“包含”的搜索算法。我要做的是用javascript编写一个自定义搜索函数,对结果进行搜索和排序。这可能吗?怎么可能? 谢谢你抽出时间。
问题内容: 我的要求是,当用户在可能也会动态添加的输入字段之一中输入一些字符(最少3个)时,显示几个选项。 由于数据量巨大,我一开始无法在页面加载时加载数据。有一个ajax调用来获取经过过滤的数据。 我得到的问题是第2行的页面加载错误。那么,请问以下代码有什么问题吗? 问题答案: 如何使用另一种方法:创建输入时初始化自动完成功能: jsFiddle与AJAX
问题内容: 我正在尝试实现自动补全功能,但是找不到在Swift中可用的示例。下面,我打算转换Ray Wenderlich的自动完成教程 和2010年的示例代码。最后,代码进行了编译,但是没有显示包含可能完成的表格,而且我没有经验来了解为什么它未被隐藏shouldChangeCharactersInRange。 问题答案: 用下面的内容替换您的函数内容。希望对您有帮助。
根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择。 如需了解更多有关 autocomplete 部件的细节,请查看 API 文档 自动完成部件(Autocomplete Widget)。 本章节使用到 search.php 下载。 默认功能 当您在输入域中输入时,自动完成(Autocomplete)部件提供相应的建议。在本实例中,提供了编程语言的建议选项,您可以输入 "ja" ,可