Django ModelChoiceField,数以千计的选项,不友好
Django ModelChoiceField, thousands of options , not user friendly
我的表单中有一个 ModelChoiceField:
customer = forms.ModelChoiceField(Customer.objects.all())
问题是它呈现为包含数百个选项的下拉菜单,用户很难找到客户,有没有办法克服这个问题???
这是执行您要在此处完成的操作的不正确方法。
如果您显示超过 20 个左右的客户,那么 UI 会变得混乱并且很难找到 ChoiceField
的客户。您可能希望将数据库中的数据索引到全文搜索引擎中,例如基于 Lucene
的 ElasticSearch
,然后使用 AJAX 通过其名称查询特定客户或任何唯一标识符。
不用说,现在您的表单将有一个文本字段,而不是 ChoiceField,只要用户尝试填写姓名,AJAX 调用就会从 ElasticSearch 中获取客户并呈现结果。
您应该使用 Bootstrap Select - 这是一个 JQuery 插件,允许通过在所需字段上设置 data-live-search="true"
来搜索下拉列表数据。
您还可以设置data-size="5"
,它只会在立即下拉字段中显示前 5 个选项,其他项目通过滚动访问。
(如果问题是加载此下拉列表所需的时间,这将无济于事)。
我的表单中有一个 ModelChoiceField:
customer = forms.ModelChoiceField(Customer.objects.all())
问题是它呈现为包含数百个选项的下拉菜单,用户很难找到客户,有没有办法克服这个问题???
这是执行您要在此处完成的操作的不正确方法。
如果您显示超过 20 个左右的客户,那么 UI 会变得混乱并且很难找到 ChoiceField
的客户。您可能希望将数据库中的数据索引到全文搜索引擎中,例如基于 Lucene
的 ElasticSearch
,然后使用 AJAX 通过其名称查询特定客户或任何唯一标识符。
不用说,现在您的表单将有一个文本字段,而不是 ChoiceField,只要用户尝试填写姓名,AJAX 调用就会从 ElasticSearch 中获取客户并呈现结果。
您应该使用 Bootstrap Select - 这是一个 JQuery 插件,允许通过在所需字段上设置 data-live-search="true"
来搜索下拉列表数据。
您还可以设置data-size="5"
,它只会在立即下拉字段中显示前 5 个选项,其他项目通过滚动访问。
(如果问题是加载此下拉列表所需的时间,这将无济于事)。