[英]Symfony Form EntityType update choices depending on search
基本信息: 可视化
在TrainingType.php中,创建表单:
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder->add('trainer', EntityType::class, [
'class' => 'AppBundle:Trainer',
'choices' => $training->trainer_list ?? null,
'label'`enter code here` => 'seminar.trainer.form.trainer.label',
'placeholder' => 'form.trainer.placeholder',
'required' => false,
]);
$builder->addEventListener(FormEvents::PRE_SET_DATA, [$this, 'onPreSetData']); // update 'trainer'
$builder->addEventListener(FormEvents::PRE_SUBMIT, [$this, 'onPreSubmit']); // update 'trainer'
}
在树枝上:
{% if field == 'trainer' %}
{{ form_row(attribute(form, field), {'id': 'trainer'}) }}
{% endif %}
javascript(测试):
<script>
$(document).ready(() => {
function trainer_changed() {
let trainer = $('#trainer');
jQuery.ajax({
url: '{{ path('trainer_select_ajax') }}',
type: 'GET',
data: {
//this is the id of the selected option, not the search term
search: trainer.val()
},
success: function (html) {
let trainer = $('#trainer');
let newchoices = $(html).find('#trainer');
trainer.replaceWith(
newchoices // works
);
}
});
}
// when a new option is selected, not what I want
$('#trainer').change(trainer_changed);
$('#trainer').on('input', trainer_changed); // no effect
});
</script>
在输入'foo'时应该更新选择列表。由于没有在预加载的数据中找到“ foo”的结果,因此当前不显示任何可选选项,即使对服务器的ajax调用发送了“ foo”,它也会返回结果。
因此,我的问题是如何将“ oninput”或“ onchange”侦听器放在图像上的搜索字段中。 当我开始键入时,它应该通过ajax调用从服务器获取更新的选择列表,并立即在下拉列表中替换它。
我什至没有选择搜索字段。 https://symfony.com/doc/3.4/form/dynamic_form_modification.html上的Symfony文档完全没有帮助,因为所有这些示例事件仅在实际选择某项时才被触发,而不仅仅是在键入搜索项时才被触发。
奖金,尽管我想我有一个方法来解决这个问题,只是使用javascript重新格式化条目,但我希望能够将每个选项显示为“姓氏,名字-标题-价格”,而不是“姓氏,名字” '(Symfony本身使用的(Trainer实体的__toString()方法)。 因此,我想我想让Symfony针对此特定表单行使用不同于__toString()的方法。
“解决方案”是首先等待下拉列表打开,然后将oninput侦听器附加到输入字段。
<script>
$(document).ready(() => {
function trainer_changed() {
let input = event.target;
jQuery.ajax({
url: '{{ path('trainer_select_ajax') }}',
type: 'GET',
data: {
search: input.value
},
success: function (trainers) {
let trainer = $('#trainer')[0];
trainer.options.length = 1; // reset all options, except for the default
trainers.forEach((tr, idx) => {
trainer[idx+1] = new Option(tr.name, tr.id);
});
}
});
}
function select_opened() {
let trainercontainer = $('select2-container select2-container--default select2-container--open');
if (trainercontainer) {
let trainerinput = trainercontainer.prevObject[0].activeElement; // input field
trainerinput.oninput = trainer_changed;
}
}
$('#select2-trainer-container').click(select_opened);
});
</script>
要立即更新渲染的下拉菜单,请使用$('input.select2__field').trigger('change');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.