[英]Customising the output of items using django-autocomplete-light v3
在 django-autocomplete-light 的早期版本中,您可以使用模板來呈現每個返回的條目,其中包括插入自定義 HTML 的能力
我無法弄清楚如何使用常規 API 來做到這一點,所以我正在嘗試添加它。
到目前為止,我有一個像這樣的 class,它使用mark_safe
並且正在傳遞 HTML:
class TemplateRenderSelect2QuerySetView(autocomplete.Select2QuerySetView):
def get_result_label(self, result):
"""Return the label of a result."""
template = get_template("autocomplete_light/item.html")
context = Context({"item": result})
return mark_safe(template.render(context))
模板autocomplete_light/item.html
是:
<b>{{ item.name }}</b>
但這被渲染為:
但是帶有正確標簽的 JSON 是正確的:
{"pagination": {"more": false}, "results": [{"text": "<b>Victoria</b>", "id": 11}]}
如何讓 django-admin 正確呈現 HTML?
編輯:我在自定義 HTML 上找到了一些額外的文檔,並嘗試針對小部件設置attrs={'data-html': 'true'}
,但它仍然無法正常工作
像往常一樣,答案是子類化,在這種情況下,技巧是重寫get_result_title
:
class CustomisableAutocomplete(autocomplete.Select2QuerySetView):
template_name = "autocomplete_light/item.html"
def get_result_title(self, result):
"""Return the label of a result."""
template = get_template(self.template_name)
context = Context({"result": result})
return template.render(context)
如果您希望標題不被標簽get_results
,則可以覆蓋get_results
並返回更多數據:
class CustomisableAutocomplete(autocomplete.Select2QuerySetView):
template_name = "autocomplete_light/item.html"
def get_result_title(self, result):
"""Return the title of a result."""
return six.text_type(result)
def get_result_text(self, result):
"""Return the label of a result."""
template = get_template(self.template_name)
context = Context({"result": result})
return template.render(context)
def get_results(self, context):
"""Return data for the 'results' key of the response."""
return [
{
'id': self.get_result_value(result),
'title': self.get_result_title(result),
'text': self.get_result_text(result),
} for result in context['object_list']
]
'data-html': 文檔中的 True 現在可以使用了。
study = forms.ModelChoiceField(queryset=Study.objects.all(),
widget=autocomplete.ModelSelect2(
url='my_studies-autocomplete',
attrs={
'data-placeholder': 'Please select...',
'data-theme': 'bootstrap4',
'data-html': True
})
)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.