这个问题看起来很简单，但正确的回答会涉及多个答案。
我将使用 jQuery 逐点给出我的解决方案。
自动完成
这是最简单的部分。您可以使用 select2 或 jqueryui autocomplete 之类的插件以及可以找到类似用户的视图
def search_users(request):
search = request.GET.get('term')
users = User.objects.filter(
Q(first_name__icontains=search)
| Q(last_name__icontains=search)
)
ulist = list({'id': u.id, 'value': u'%s %s' % (u.first_name, u.last_name)}
for u in users)
return JsonResponse(ulist)
此视图与默认的 jQuery UI 自动完成插件兼容
动态表单集
这是一个棘手的问题。关键是利用management_form 和form.DELETE。这是我的解决方案：
- 为参与者使用内联表单集（带有一个额外的表单）
- 打印
management_form
- 通过克隆一个隐藏的空表单（额外的一个）并递增
id_form-TOTAL_FORMS，在自动完成选择后使用 jQuery 添加表单行
- 使用 jQuery 删除表单行，方法是隐藏它们并选中隐藏的删除复选框
模板
<form method="post">{% csrf_token %}
{{ sessionform }}
<div>
{{ participant_formset.management_form }}
<label for="part_search">Search: </label><input id="part_search" />
<ul id="participation_set">
{% for tform in participant_formset %}
{{ tform.id }}
<li>
<span class="participant">
{{ tform.participant }}{{ tform.instance.participant.name }}
</span>
<span class="status">{{ tform.status }}</span>
<span class="delete ui-icon ui-icon-circle-minus">
{{ tform.DELETE }}
</span>
</li>
{% endfor %}
</ul>
</div>
</form>
CSS
/* Delete button */
#participation_set .delete {
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
/* Hidden delete checkbox */
#participation_set .delete input {
display: none;
}
/* Deleted form */
#participation_set li.deleted {
display: none;
}
/* Last hidden form to clone */
#participation_set li:last-child {
display: none;
}
jQuery
>
/*! This adds a form line
* Call it on autocomplete select
*/
function add_aform(inst, item) {
if ($(':input[name$="participant"][value=' + item.id + ']').length) {
return false;
}
var total = $('#id_' + inst + '-TOTAL_FORMS').val();
var sul = '#' + inst;
var li = $(sul + ' li:last-child');
var new_li = li.clone().appendTo(sul);
li.find('span.participant').append(item.label);
li.find(':input[name$="participant"]').val(item.id);
new_li.find(':input').each(function () {
var new_name = $(this).attr('name')
.replace('-' + (total - 1) + '-', '-' + total + '-');
$(this).attr('name', new_name);
});
new_li.find('label').each(function () {
var tmp = $(this).attr('for')
.replace('-' + (total - 1) + '-', '-' + total + '-');
$(this).attr('for', new_for);
});
new_li.find('.delete').click(del_aform);
$('#id_' + inst + '-TOTAL_FORMS').val(++total);
}
/*! This removes a form line
* Call it on click from delete buttons (placed inside each li)
*/
function del_aform() {
$(this).parents('li').addClass('deleted');
$(this).find(':checkbox').attr('checked', true);
}
我知道我也可以使用 empty_form 实例并使用 __prefix__ 替换 id，这简化了 javascript 以获得更好的可维护性，但我没有找到一种方法来分解真实形式和空一个。
查看
使用inlineformset_factory 并将extra 设置为1（以获取唯一要克隆的隐藏表单）的视图非常标准。也不要忘记为字段participant 使用HiddenInput 小部件