Django-带自动完成的Javascript动态内联表单集

我正在尝试制作一种能够附加参与者的调度器事件编辑器

模型 在编辑器中，我希望有一个自动完成的搜索输入，从中我可以找到要添加到会话中的

用户

预览

在这里，我输入了“laurent”，我将通过单击其中一个结果名称来添加一个人

参与者的颜色取决于其
状态

我有一个用开始和结束时间定义的
会话
对象的表单

现在我想我应该为
参与
s创建一个内联表单集

问题

您是否建议我为参与者使用内联表单集
如何动态添加/删除参与者行
这个问题看起来很简单，但正确的回答需要几个答案

我将使用jQuery逐点给出我的解决方案

自动完成
这是最简单的部分。您可以使用类似或的插件和查找类似用户的视图

def search_用户（请求）：
search=request.GET.GET（'term'）
users=User.objects.filter(
Q（first\u name\u icontains=search）
|Q（姓氏=搜索）
)
ulist=list（{'id'：u.id，'value'：u'%s%s'（u.first\u name，u.last\u name）}
（适用于用户中的u）
返回JsonResponse（ulist）

此视图与默认的jQuery UI自动完成插件兼容

动态表单集
这是个棘手的问题。关键是利用
管理表单
和
表单。删除
。以下是我的解决方案：


为参与者使用内联表单集（附带一个额外表单）
打印
管理表单
通过克隆隐藏的空表单（额外的表单）并递增
id\u form-TOTAL\u FORMS
通过隐藏表单行并选中隐藏的删除复选框，使用jQuery删除表单行

模板
{%csrf\u令牌%}
{{sessionform}}
{{participant_formset.management_form}
搜索：

{参与者_formset%}中的tform为%
{{tform.id}

{{tform.participant}{{tform.instance.participant.name}
{{tform.status}
{{tform.DELETE}

{%endfor%}


CSS
/*删除按钮*/
#参与集。删除{
显示：内联块；
垂直对齐：中间对齐；
光标：指针；
}
/*隐藏删除复选框*/
#参与设置。删除输入{
显示：无；
}
/*删除的表格*/
#已删除参与集li{
显示：无；
}
/*要克隆的最后一个隐藏窗体*/
#李：最后一个孩子{
显示：无；
}

jQuery
/*！这将添加一个表单行
*在自动完成选择时调用它
*/
功能添加表（仪表，项目）{
if（$（'：输入[name$=“participant”][value='+item.id+']）.length）{
返回false；
}
var total=$（'#id'+inst+'-total_FORMS'）.val（）；
变量sul='#'+inst；
var li=$（sul+‘li:最后一个孩子’）；
var new_li=li.clone（）.appendTo（sul）；
li.find（'span.participant'）.append（item.label）；
li.find（':input[name$=“participant”]'）.val（item.id）；
新的查找（':input'）。每个（函数（）{
var new_name=$（this.attr（'name'））
。替换（“-”+（总计-1）+“-”，“-”+总计+”-）；
$（this.attr（'名称'，新名称）；
});
新的查找（'label'）。每个（函数（）{
var tmp=$（this.attr（'for'））
。替换（“-”+（总计-1）+“-”，“-”+总计+”-）；
$（this.attr（'for'，new_for））；
});
新建查找（'.delete'）。单击（del形式）；
$（'id'+inst+'-TOTAL_FORMS'）.val（++TOTAL）；
}
/*! 这将删除一个表单行
*单击“从删除”按钮（放置在每个li内）调用它
*/
函数del_aform（）{
$（this.parents（'li'）.addClass（'deleted'）；
$（this.find（'：checkbox'）.attr（'checked'，true）；
}

我知道我也可以使用
空表单
实例并使用
\uuuuuuuuuuu前缀
替换id，从而简化javascript以获得更好的可维护性，但我没有找到将代码分解为真实表单和空表单的方法

看法
使用
inlineformset\u factory
将
extra
设置为1（以获取要克隆的唯一隐藏表单），该视图非常标准。另外，不要忘了为字段
参与者
使用
HiddenInput
小部件。此插件将帮助您获得所需的自动完成功能：

+1作为第一个（目前也是唯一一个）回答：）
class Session(models.Model):
  start_time = models.DateTimeField()
  end_time = models.DateTimeField()

class Participation(models.Model):
  session = models.ForeignKey(Session)
  participant = models.ForeignKey(User)
  status = models.CharField(max_length=1, choices=STATUSES)